How to force slideToggle to open or close all...

[joetaylor]

ok, to set this up.. This is a page with about 50 paragraphs..  I essentially have two scripts on this page.  One to open those paragraphs one by one.  And another to open and close all of them.

 

My problem is when I've opened a one or more paragraphs and decide to then click the link that opens all, ... it actually closes the 'open paragraphs' and opens the rest.     

 

Is there something I can add to this code that would force all to open or close instead of just toggling each individually?  

// FAQ hide show ALL
$(document).ready(function() {
 $('.nav-toggle').click(function(){

var collapse_content_selector = $(this).attr('href'); 

var toggle_switch = $(this);
$(collapse_content_selector).slideToggle('150', function(){
 if($(this).css('display')=='none'){

toggle_switch.html('[x] expand all');
 }else{
toggle_switch.html('[x] hide all');
 }
});
 });

}); 

 My HTML

<button href=".slideall" class="nav-toggle">[x] expand all</button>

Then of course each paragraph is assigned that class (.slideall)..

 

Thanks for your input in advance!

 

~Joe

[nogray]

You should use slideup (close) and slidedown (open) instead of slidetoggle.

[joetaylor]

Thanks, makes sense.  I was playing around with it a lot today and I noticed that or similar worked.  But I have to figure out how to code it so I can still have the button text toggle back and forth.. and have just the one button/ link.  It's easy peezy to have two buttons.

 

I've been scouring the net for hours and hours today testing a myriad of avenues.. been thinking there's GOT to be a jquery plugin that will do something as simple as this, but I'm not having a lot of luck - found a couple, but they are either too complicated or don't work for some reason.

 

I'm trying to code it myself from scratch (or adding to what I have there) thinking that I would use an if/then type statement..  

 

I would assume that would work.  

 

Learning a lot, but still not there.. 

[kicken]

Use a class to indicate the state of the toggle. Based on whether that class exists or not you can determine whether you want to slideUp or slideDown.

 

var toggle_switch = $(this);
if (toggle_switch.is('.expanded')){
   $(collapse_content_selector).slideUp(150, function(){
      toggle_switch.text('[x] Expand All').removeClass('expanded');
   });
}
else {
   $(collapse_content_selector).slideDown(150, function(){
      toggle_switch.text('[x] Collapse All').addClass('expanded');
   });
}

[joetaylor]

Wow, thanks a million!  I was hoping there was a simple and elegant way to accomplish this.  

 

I can't wait until 'what my mind envisions' and 'my coding abilities' meet someday.  I had a hunch if statement/then/else probably was the answer combined with manipulating classes, but my brain wasn't connecting the coding dots yet.   

 

unrelated note...

 I can't wait until I can give back more to this community; you've all been great so far.. I've been lurking in the other forum areas that I have more experience with waiting for an opportunity to help and give back; I'll spend some of the time I would have been figuring this problem out today at phpfreaks!   ty all!