Toggle a Div’s Visibility with jQuery

To toggle an element in terms of visibility, like a DIV for example, is pretty easy with jQuery and its ultra nifty toggle() function.

First, simply declare the div you wish to hide and show, give it an ID and if you want, set the initial display by using a style attribute like display: none;

Then, create a toggle controller element which you will use for the user to click on in order to trigger the DIV display/hide action. Again, this needs a ID attribute at most:

<p style="cursor:pointer" id="togglecontrol">(Show/Hide)</p>
<div style="display:none;" id="toggle">Toggle Me!</div>

Finally, put it all together with some jQuery code:

    $(document).ready(function(){
        $('#togglecontrol').click(function(){
            $('#toggle').toggle();
        });
    });

So now clicking on the toggle control element will run the toggle() function against the DIV, basically showing and hiding it at will!

Nifty.