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

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

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использует .in для раскрытия содержимого при загрузке страницы, Bootstrap 4 в этом случае использует .show.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты