If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Problem collapsing and expanding tables from clicking buttons

Hello,

It looks like you guys have a great forum here, so I decided to join and see if anybody could assist me with something that's been driving me crazy for the past few days.

I have multiple long-width bootstrap buttons that I would like to be expandable and collapsable upon clicking; but the way I have the code now it will only keep expanding and collapsing the very first tab regardless of which button I hit.

I have a feeling I need to give each button it's own ID and somehow call that in the bootstrap javascript, but I've been unable to find the solution so far.

Here is the code for 2 of the buttons, with each button having it's own table under it that I want to collapse/expand:

jQuery(document).ready(function($){
$(".btn").click(function(){
$(this).next('div').collapse('toggle');
});
//button to expand all boxes
//.otherbtn is an example of the name of the button
$(".otherbtn").click({
if($("#toggleDemo").is(":visible")){ $("#toggleDemo").slideUp(); }
else{ $("#toggleDemo").slideDown(); }
});
})

And my recomendation is to chance the name of the divs ('toggleDemo', 'toggleDemo1', 'toggleDemo2', etc) to 'toggleDemo'... All them with the same name, to this code work...

Thank you JCPerez, I really appreciate your responses and they are really helping me out!

I'm having one issue with that code you just posted; it looks like when I add in the second part (for the expand all), it breaks the first part, making it so none of the buttons work? Any ideas what I could be doing wrong? Also, I just double checked and i do have all the divs id set to "toggleDemo", without any numbers

jQuery(document).ready(function($){
$(".btn").click(function(){
$(this).next('div').collapse('toggle');
});
//button to expand all boxes
//.otherbtn is an example of the name of the button
$(".otherbtn").click(function(){
if($("#toggleDemo").is(":visible")){ $("#toggleDemo").slideUp(); }
else{ $("#toggleDemo").slideDown(); }
});
})

I can post the full code if I need to but it's a site with login information for websites so I'd need to remove some parts before posting it

This code now has the other buttons working normally which is a great. I made a button 'otherbtn' but the problem is that it collapses the buttons, but not the actual content "inside" the buttons that collapses out... Do you know how I could add in a part for the new button that does a collapse('toggle') on all of the other buttons so they're all collapsed or expanded?