• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 350
  • Last Modified:

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 ...
0
dgrafx
Asked:
dgrafx
  • 4
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
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

0
 
dgrafxAuthor Commented:
hey leak - where is the expand / collapse all feature?
I guess I don't get it ...
0
 
leakim971PluritechnicianCommented:
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
dgrafxAuthor Commented:
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 ...
0
 
mickey159Commented:
Demo:

http://jsfiddle.net/nHHTh/2/

Please tell me if you find further problems.

Good luck!
0
 
dgrafxAuthor Commented:
As usual - Groovy
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now