Bootstrap 3 dynamic display text

Question

I'm struggling with Bootstrap's collapse class in my project, trying to bind keys (buttons) with text in another div so I can collapse and display it properly.

I know how to do that in a simple collapsing example, but as you will see I need to display different text for every title and subcategory button.

Bootstrap code:

    <!-- In this section evert btn class need to toggle/display text in the Subcategory section, Question is how to do that. -->
    <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>
            <tr class="up">
      <td><a class="btn btn-md" role="button" data-toggle="collapse" href="#collapseExample" id="row2" data-target=".row2" aria-expanded="false" aria-controls="collapseExample"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" role="button" data-toggle-to="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
      </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
      <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
      </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
      <thead>
    <tr>
      <th class="text-center">Title</th>
            </tr>
          </thead>
          <tbody>
            <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 1 </span></a></td>
        </tr>
    <tr class="up">
    <td><a class="btn btn-md" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a></td>
    </tr>
          </tbody>
   </table>
      </div>
   </div>

   <!-- This section need's 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">

        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum consequuntur architecto quis, itaque cupiditate, atque aliquam. Qui delectus corporis quidem nisi molestiae ullam, ipsam sapiente corrupti, asperiores. Nobis, sed!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quasi unde et reprehenderit, qui, deserunt veritatis architecto pariatur, molestiae commodi consectetur deleniti consequatur laudantium dolore rem vitae nesciunt sed temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sequi et sint impedit laboriosam. Tenetur quidem perspiciatis repellat numquam vero similique, dolorum alias, distinctio dignissimos tempora, et, dicta quia laborum.</p>

      </div>

      <div class="panel inner-div-3 collapse row2" id="collapseExample1">

        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum consequuntur architecto quis, itaque cupiditate, atque aliquam. Qui delectus corporis quidem nisi molestiae ullam, ipsam sapiente corrupti, asperiores. Nobis, sed!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quasi unde et reprehenderit, qui, deserunt veritatis architecto pariatur, molestiae commodi consectetur deleniti consequatur laudantium dolore rem vitae nesciunt sed temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sequi et sint impedit laboriosam. Tenetur quidem perspiciatis repellat numquam vero similique, dolorum alias, distinctio dignissimos tempora, et, dicta quia laborum.</p>

      </div>
    </div>

Here is my Bootply example. This is updated whit working example.

As you can see when you click on a subcategory 1 button, text will collapse and display properly, but when you click on subcategory 2 button text will not display properly.

How can I bind buttons to display text that needs to be hidden inside <div class="subcategory"> only using Bootstrap collapse class.

Maybe a proper question is, is it possible to do that with just a minimum of Bootstrap JavaScript or not, and how to do that?

Answer 1

As you can see your first link (Subcategories 1) is working, but the second (Subcategories 2) is not. That's because in your second link you used data-toggle-to instead of data-toggle. In Bootstrap, data-toggle is used by the collapse plugin, so you must use data-toggle.

So replace your code with:

<a class="btn btn-md" role="button" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"><span class="glyphicon glyphicon-play" aria-hidden="true"> Subcategories 2 </span></a>

For more information, see: http://getbootstrap.com/javascript/#collapse. I think it'll help you learn the basics of Bootstrap collapse.

And if you ask if it's possible to make a collapse effect with Bootstrap, then the answer is of course, you can do it! You just need to add an id and .collapse to a specific element and add data-toggle="collapse" data-target="#yourElementID" to your link (or whatever you use).

Here's a basic example:

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Hope that helps.