Posted By

mattvbiggs on 10/07/10


Tagged

jquery collapse expand


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

bobbym245
Fiasko
jplr
dekehooper
roybatty
johnw


JQuery: Toggle Expand/Collapse


 / Published in: jQuery
 

I know there are other solutions and sites out there that provide code to perform this simple animation but I like the way I laid out the code. The principal behind this code is it will toggle a show or hide event and change your plus or minus image to correlate with the respective layout. In the snippet below the references to #img and #div should refer to the id attribute you set, not to the actual img and div tags.

  1. $('#img').toggle(function() {
  2. $('#div').show('slow');
  3. $('#img').attr('src', 'root/images/minus.gif');
  4. }, function() {
  5. $('#div').hide('fast');
  6. $('#img').attr('src', 'root/images/plus.gif');
  7. });
  8. });

Report this snippet  

You need to login to post a comment.