Solved

slideToggle expand collapse all link

Posted on 2013-05-24
7
312 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now