Как создать виджет свертывания в Bootstrap 5?

div itemprop=»articleBody»>

Свертывание имени — это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели — хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap. Bootstrap 5 представил новый компонент аккордеона, поэтому не путайте с этими двумя.

Учебное пособие по свертыванию Bootstrap 5

Введение в Bootstrap collapse
Создание коллапса с атрибутом href
Свернуть с помощью функции Data-toogle
Свертывание нескольких целей
Аккордеонный коллапс
Сворачиваемое тело содержимого

1. Введение в Collapse

Компонент сворачивания состоит из двух элементов:

Базовый элемент для отображения или скрытия сворачивания.
Фактическое содержимое внутри свернутого контейнера.

Он использует следующие три класса CSS:

«.крах»Используется для сокрытия содержимого.
«.collapsing»Используется для применения эффекта перехода.
«.collapse.show»Используется для отображения содержимого.

Здесь мы обсудим создание трех типов сворачивания — с использованием атрибута href, с использованием переключения данных и стиля аккордеона.

2. Свернуть с атрибутом Href

В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь «переключение данных»Со значением«крах«. Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.

После триггера коллапса фактическое содержимое должно быть добавлено отдельным тегом

div>, идентифицируемым с тем же идентификатором атрибута href. Вы также должны добавить «.крах»К тегу div. Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.

Полный код коллапса с атрибутом href показан ниже:

<p>
<a class="btn btn-primary" data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#linkcollapse" aria-expanded="false" aria-controls="Collapse">
Link with Href
</a>
</p>
<div class="collapse" id="linkcollapse">
<div class="card card-block">
Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing.
</div>
</div>

Результат должен выглядеть как кнопка, и при нажатии на кнопку должно отображаться сворачиваемое содержимое.

Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap, который включает необходимый фреймворк CSS и JavaScript.

3. Свернуть с переключением данных.

Вместо атрибута href вы можете использовать «data-toggle = свернуть”С элементом кнопки для создания триггера, как показано ниже:

<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse">
Button with data-target
</button>
</p>
<div class="collapse" id="buttoncollapse">
<div class="card card-block">
Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing.
</div>
</div>

Результат приведенного выше кода будет выглядеть, как показано ниже, аналогично примеру href.

4. Свертывание множественных тегов

В приведенном выше примере один компонент сворачивания переключается с помощью кнопки. Вы также можете переключать несколько компонентов сворачивания, используя один элемент. Например, в приведенном ниже коде есть три кнопки. Первая и вторая кнопки используются для переключения первого и второго сворачивания соответственно. Третья кнопка используется для переключения первого и второго сворачиваний вместе.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="https://www.webnots.com/bootstrap-collapse-tutorial/#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a>
  <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button>
  <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multipleCollapse1">
      <div class="card card-body">
            Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multipleCollapse2">
      <div class="card card-body">
            Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
</div>

На вашем сайте это будет выглядеть примерно так:

5. Коллапс аккордеона

Последний и самый популярный вариант — создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками — первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="Firstheading">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="https://www.webnots.com/bootstrap-collapse-tutorial/#collapse1" aria-expanded="true" aria-controls="collapse1">
          Heading 1
        </a>
      </h5>
    </div>

    <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading">
<div style="margin:20px;">
        <div class="card-group">
  <div class="card">
    <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
    <div class="card-body">
      <h4 class="card-title">Card Title</h4>
      <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Here is a footer</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
    <div class="card-body">
      <h4 class="card-title">Card Title</h4>
      <p class="card-text">Here is a shorter description of the card.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Here is a footer</small>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="secondheading">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          Heading 2
        </a>
      </h5>
    </div>
    <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
      <div class="card-body">
        Here is the content for the second section.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
          Heading 3
        </a>
      </h5>
    </div>
    <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-body">
        Here is the content for the third section.
      </div>
    </div>
  </div>
</div>

Это длинный блок кода, в основном из-за раздела группы карт для первого сворачивания. Давайте рассмотрим все элементы этого кода:

5.1. Аккордеон

Аккордеон заключен в теги div с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
Всего используются три складных раздела, и каждый раздел должен начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.

5.2. Заголовок

Класс «.card-header”Используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением табуляции.
Внутри заголовка добавьте теги заголовков, в данном случае мы использовали h5.
Опять же, внутри тегов заголовков добавьте ссылку привязки со следующими классами / атрибутами:
- Добавлять «.collapsed»Класс по аккордеону.
- Добавлять переключение данных атрибут со значением как крах.
- Добавлять родитель данных атрибут с тем же идентификатором, который использовался для первого (в данном случае #accordion).
- Атрибут Href должен иметь идентификатор сворачиваемого содержимого: «# collapse1«.
- Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
- Установите значение атрибута aria-controls с тем же идентификатором значения атрибута Href (collapse1).

6. Сворачиваемое тело содержимого

Откройте новый тег после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка (collapse1).
Добавьте класс «.collapse показать», Чтобы показать содержимое открытым. Вы не должны использовать «.показывать»Для остальных разделов, поскольку они должны быть закрыты.
Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.

Выполните тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так: