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

Легко добавляйте сворачиваемое содержимое с помощью .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>