Сворачивание содержимого

Легко добавляйте сворачиваемое содержимое с помощью .collapse и связанных классов. Вы можете сделать своё содержимое сворачиваемым, добавив data-toggle="collapse" к кнопке или ссылке, которая указывает на идентификатор содержимого для сворачивания.

Использование ссылки

Используйте элемент <a>, у которого значение href задано как идентификатор сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

Код примера скопирован в буфер

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p><a data-toggle="collapse" href="#footwear" aria-expanded="false" aria-controls="footwear">Обувь</a></p>
<div class="collapse" id="footwear">
  <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от 
    неблагоприятных воздействий окружающей среды, обычно в отношении поверхности 
    и температуры.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Использование кнопки

Используйте атрибут data-target со значением идентификатора сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

Код примера скопирован в буфер

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear"
  aria-expanded="false" aria-controls="footwear">Обувь</button>
<div class="collapse" id="footwear">
  <p>Обувь относится к предметам одежды для ног, изначально служит для защиты от 
    неблагоприятных воздействий окружающей среды, обычно в отношении поверхности 
    и температуры.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Аккордеон

Сворачиваемое содержимое часто используется для создания «аккордеона», популярного для часто задаваемых вопросов, обзоров продуктов и др. Вы можете использовать карточки Bootstrap для оформления аккордеона, как показано ниже.

Добавьте класс .show к сворачиваемому содержимому, чтобы оно раскрывалось при загрузке страницы, кроме того используйте aria-extended="true".

Код примера скопирован в буфер

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="faq" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="questionOne">
      <h5 class="card-title">
        <a data-toggle="collapse" data-parent="#faq" href="#answerOne" 
          aria-expanded="true" aria-controls="answerOne">
          Что если ботинки большие для моих ног?
        </a>
     </h5>
    </div>
    <div id="answerOne" class="collapse show" role="tabcard" aria-labelledby="questionOne">
     <div class="card-body">
       Набейте ботинки газетами или салфетками.
     </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="questionTwo">
      <h5 class="card-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" 
          aria-expanded="false" aria-controls="answerTwo">
          Могу я носить ботинки в помещении?
        </a>
      </h5>
    </div>
    <div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
      <div class="card-body">
        Нет. Твоя мама должна была рассказать об этом.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="questionThree">
      <h5 class="card-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#faq" 
          href="#answerThree" aria-expanded="true" aria-controls="answerThree">
          Что делать, если ботинки скользят при намокании?
        </a>
      </h5>
    </div>
    <div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
      <div class="card-body">
        Храните ботинки в сухости.
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>