Link to home
Start Free TrialLog in
Avatar of dgrafx
dgrafxFlag for United States of America

asked on

slideToggle expand collapse all link

there are x number of groups of expandable elements
such as :
<div>
      <h3>Toggle 1</h3>
      <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer      
      </p>
</div>
<div>
      <h3>Toggle 2</h3>
      <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
      </p>
</div>

I'm having trouble coding an expand all / collapse all link - the important part is that it is just one link that does both.
Each toggle area can be individually expanded/collapsed and so when some are in an expanded state and others are in a closed state I need this link to know if any are closed then open all - plus change the link text.
Also change link text when the elements are expanded / collapsed individually.

Any questions please ask ...
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Test page : http://jsfiddle.net/nHHTh/

Let me know if you don't understand the code

$(document).ready(function() {
    $("h3").click(function() {
        if($(this).hasClass("collapsed")) $(this).removeClass("collapsed").next("p").slideDown();
        else $(this).addClass("collapsed").next("p").slideUp();
    })
})

Open in new window

Avatar of dgrafx

ASKER

hey leak - where is the expand / collapse all feature?
I guess I don't get it ...
Avatar of dgrafx

ASKER

leak - you are the master!

one thing :
click to collapse Toggle 1 then click to collapse Toggle 2 - you then need to click all twice to expand ...
ASKER CERTIFIED SOLUTION
Avatar of mickey159
mickey159
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dgrafx

ASKER

As usual - Groovy