My current struggle involves the implementation of Bootstrap's collapse class in my project. I am attempting to connect buttons with text located in a separate div in order to properly collapse and display it.
While I can easily achieve this in a straightforward collapsing scenario, my challenge lies in displaying unique text for each title and subcategory button.
Within the Bootstrap code snippet below, each btn class should toggle/display text within the Subcategory section. The question remains: how can this be accomplished?
<!-- Each btn class needs to toggle/display text in the Subcategory section. How can this be achieved? -->
<div class="col-md-2 col-md-push-1 lists">
<div class="inner-div">
<table class="table table-striped">
<thead>
<tr>
<th>Logo</th>
</tr>
</thead>
<thead>
<tr>
<th class="text-center">Title</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
<!-- This section needs to toggle and display different text -->
<div class="col-md-6 col-md-push-2 podnaslov">
<div class="subcategories">
<h1 class="text-center">Display Subcategories</h1>
</div>
<hr>
<div class="panel inner-div-3 collapse" id="collapseExample">
...
</div>
</div>
For a detailed example, you can visit my Bootply demonstration.
Upon inspecting the example, it is evident that clicking on the subcategory 1 button successfully collapses and displays text. However, clicking on the subcategory 2 button doesn't function as intended.
Is there a way to bind buttons to show hidden text within the <div class="subcategory"> using only Bootstrap's collapse class? This raises the question of whether achieving this functionality requires additional Bootstrap JavaScript or not.