Приховування вмісту в Bootstrap 4

Легко додавайте вміст, що згортається, за допомогою .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>