Toggle a Div’s Visibility with jQuery CodeUnit 18 JAN 2011

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:


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


Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.