Вы можете сделать содержимое сворачиваемым, добавив data-bs-toggle="collapse" к кнопке или ссылке.
Кнопка или ссылка ссылается на идентификатор содержимого, которое должно быть свёрнуто.
Использование ссылки
Используйте тег <a>, в качестве значения href укажите идентификатор содержимого, которое нужно свернуть.
В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно присвойте ему идентификатор.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<p><a class="btn btn-primary" data-bs-toggle="collapse" href="#footwear" aria-expanded="false" aria-controls="footwear">Обувь</a>
</p>
<div class="collapse" id="footwear">
<p>Под обувью понимается одежда, которую носят на ногах и
первоначально она служит для защиты от неблагоприятных воздействий
окружающей среды, обычно связанных с поверхностью земли и температурой.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Использование кнопки
Используйте атрибут data-bs-target со значением идентификатора содержимого, которое нужно свернуть.
В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно присвойте ему идентификатор.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<p>
<button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#footwear" aria-expanded="false" aria-controls="footwear">
Обувь
</button>
</p>
<div class="collapse" id="footwear">
<p>Под обувью понимается одежда, которую носят на ногах и
первоначально она служит для защиты от неблагоприятных воздействий
окружающей среды, обычно связанных с поверхностью земли и температурой.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Аккордеон
Сворачиваемое содержимое часто применяется для создания «аккордеона». Аккордеоны популярны для такого содержимого, как часто задаваемые вопросы, обзоры продуктов и др.
Вы можете использовать карточки Bootstrap для создания стиля аккордеона, как показано ниже.
Добавьте класс .show к сворачиваемому содержимому, чтобы оно раскрывалось при загрузке страницы. Также используйте aria-expanded="true" в этом случае.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<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-bs-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-bs-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-bs-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://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>