Let’s say we have a DIV in our HTML that has the id “box” and we want to place a link beneath it, that opens and closes it, depending on the state it is in (open, closed).

Here’s the code:

<div id="box">i am a box</div>

<a href="#" onclick="jQuery('#box').toggle();">open/close</a>

Now isn’t that neat? But what if we want to do that with style? Let’s slide the box when you click the link:

<div id="box">i am a box</div>

<a href="#" onclick="jQuery('#box').slideToggle();">open/close</a>

Now the box slides up and down when you click the activator link – you can of course add the onclick() handler to another element or even to the box itself (although you then will need a separate link to reopen it)

Related posts

• JavaScript cookies (0)
• IRC server & channels added! (0)
• How to process multiple checkboxes with jQuery (0)
• How to AJAX with jQuery (0)
• Changing selected option in a SELECT (0)