How to hide a div with jquery or alternative?


Tags: javascript,jquery,html,css

Problem :

Okay so here is my code:

HTML

<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>

CSS:

#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;  
z-index: 10;
visibility: hidden;
}

JS

$('.custom_class_1').click(function()    {
    $('#overlay-2').fadeIn(300);
    });

I want to toggle the visibility of #overlay-2 when I click on my button ".custom_class_1"

How can I do this? Not sure if visibility: hiddenis the route to go in the css. But I do want it hidden on page load as it would cover the entire screen with a dark overlay.

Any help would be much appreciated! Thanks



Solution :

This should work:

$('.custom_class_1').click(function()    {
       $('#overlay-2').toggle();
    });

And in your main css, as others have suggested you should use Display: none in place of Visibility: hidden


    CSS Howto..

    How prevent Conflict between two $(this) in jquery?

    How to get Circle Hover Effects with CSS Transitions with img tag?

    How to transform a button into this styled button

    How to fade loop background images?

    How to align text vertically equal top CSS

    How to Align text with respect to image css

    how to hidden image over image in css

    How did overflow actually work here?

    How to keep navigation tab remain unchanged

    CSS: How to position elements in ng-for loop using position : “fixed”

    How to achieve this diagonal drop down effect with CSS?

    How to make image thumbnail look like video with CSS

    How to create footers in CSS

    how to get css of a clicked div using jquery?

    How to position main content below header and footer in css

    Showing responsive menu link that is not shown in regular navigation menu

    How to remove an overhanging div

    How (where) can i set fixed cell size in nested html tables, with css?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How do I center a Bootstrap div with a 'spanX' class?

    How to prevent CSS/Javasript on specific selectors using Id?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How can I generate a random color with Stylus CSS?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to style the value of a placeholder like if I want to give a margin at left of that value, what to write in css?

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to refer to children elements in CSS

    How to override default CSS in cakePHP 1.3?

    How to avoid messing formating up?

    How to rotate a chart 90 degrees including the text values?