Бутстрап 3 динамический текст дисплея

Question

Я борюсь с классом Bootstrap collapse в моем проекте, пытаясь связать клавиши (кнопки) с текстом в другом div, чтобы я мог свернуть и отобразить его правильно.

Я знаю, как это сделать в простом сворачивающемся примере, но, как вы увидите, мне нужно отображать разные тексты для каждой кнопки title и subcategory.

Bootstrap код:

<!-- 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> 

Вот мой Bootply пример. Это обновленный рабочий пример.

Как вы можете видеть, когда вы нажимаете кнопку subcategory 1, текст рушится и отображается правильно, но при нажатии на кнопку subcategory 2 текст кнопки отображается неправильно.

Как связать кнопки для отображения текста, который должен быть скрыт внутри <div class="subcategory">, только с использованием класса свертывания Bootstrap.

Возможно, правильный вопрос: возможно ли это сделать с минимальным загрузочным JavaScript или нет, и как это сделать?

Я классный курсант с классами JavaScript Bootstrap, поэтому, пожалуйста, со мной, пытаясь узнать что-то из этого, чтобы я мог использовать его в своих будущих проектах.

Answer 1

Как вы можете видеть, ваша первая ссылка (подкатегории 1) работает, а вторая (подкатегории 2) - нет. Это потому, что в вашей второй ссылке вы использовали data-toggle-to вместо data-toggle. В Bootstrap, data-toggle используется плагином коллапса, поэтому вы должны использовать data-toggle.

Так заменить код:

<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> 

Для получения дополнительной информации см: http://getbootstrap.com/javascript/#collapse. Я думаю, это поможет вам изучить основы развала Bootstrap.

И если вы спросите, возможно ли сделать эффект коллапса с помощью Bootstrap, тогда ответ, конечно, вы можете это сделать! Вам просто нужно добавить id и .collapse к определенному элементу и добавить data-toggle="collapse" data-target="#yourElementID" к вашей ссылке (или что бы вы ни использовали).

Вот простой пример:

<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> 

Надежда, что помогает.