Question

I have a div with the following class:

#instrucPanel {
    background-color:black;
    opacity:0;
    position: absolute;
    left: 180px;
    top: 71px;
    height: 226px
}

At page load is hidden. I want to display it when user click on a button. And make it hidden if the user click on the same button.

To do that I’m using the following JavaScript code:

function ShowHideInstruc()
{
    if ($.myNameSapace.instShown)
    {
        $.myNameSpace.instShown = false;
        $('#instrucPanel').fadeOut('fast');
    }
    else
    {
        $.myNameSpace.instShown = true;
        $('#instrucPanel').fadeIn('slow');
    }
}

But I don’t see anything, it is always hidden.

What I’m doing wrong?

Answer 1

First, you must use display:none; as opposed to opacity:0.

Then you can make use of the .fadeToggle() method, like this:

function ShowHideInstruc()
{
     var show = $.viacognitaspace.instShown = !$.viacognitaspace.instShown; 
     $('#instrucPanel').fadeToggle((show) ? 'fast' : 'slow');
}

Note how this approach is a whole lot DRYer.