Solved

slideToggle expand collapse all link

Posted on 2013-05-24
7
319 Views
Last Modified: 2013-05-28
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
Comment
Question by:dgrafx
  • 4
  • 2
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39195683
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
 
LVL 25

Author Comment

by:dgrafx
ID: 39195879
hey leak - where is the expand / collapse all feature?
I guess I don't get it ...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39195928
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 25

Author Comment

by:dgrafx
ID: 39195938
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
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
ID: 39196601
Demo:

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

Please tell me if you find further problems.

Good luck!
0
 
LVL 25

Author Closing Comment

by:dgrafx
ID: 39196692
As usual - Groovy
0
 
LVL 25

Author Comment

by:dgrafx
ID: 39202160
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question