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:

First button:

[CODE]
<!– SALES AND SOURCING–>
<div class=”bs-example”>
<!– Trigger Button HTML –>
<input type=”button” class=”btn btn-block btn-info btn-lg role=”button” value=”Sales and Sourcing”>
<!– Collapsible Element HTML –>
<div id=”toggleDemo”>

<table class=”table table-bordered table-condensed table-hover”>
<!– rest of the table code –>
[/CODE]

Second button:

[CODE]
<div class=”bs-example”>
<!– Trigger Button HTML –>
<input type=”button” id=”test” class=”btn btn-block btn-info btn-lg role=”button” value=”Logistics”>
<!– Collapsible Element HTML –>
<div id=”toggleDemo1″>

<table class=”table table-bordered table-condensed table-hover”>
<!– rest of the table code –>
[/CODE]

Javascript:

[CODE]
$(document).ready(function(){
$(“.btn”).click(function(){
$(“#toggleDemo”).collapse(‘toggle’);
});
});
[/CODE]

Currently the problem is that clicking any button just opens/closes the first button’s table, but no others.

Do I need to duplicate the JS code for each button I want to collapse? How can I make it point to that instead of just all buttons?

Also in #JavaScript _↴