Сворачиваемые Bootstrap 5

Основной сворачивание

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

Пример

<button data-bs-toggle="collapse" data-bs-target="#demo">Весна</button>
<div id="demo" class="collapse">
  <p>В ясный день ищу ароматы цветов у берега Сяши, безграничные пейзажи в одно мгновение становятся новыми.</p>
  <p>Всегда легко узнать лицо весны, когда вокруг цветет тысяча цветов и тысяча цветов.</p>
</div>

Попробуйте сами

Пример объяснение

.collapse Класс указывает на сворачиваемый элемент (в нашем примере это <div>); через нажатие кнопки можно показать или скрыть содержимое.

Для управления (показ/скрытие) сворачиваемого содержимого установите data-bs-toggle="collapse" Атрибут добавить к элементам <a> или <button>. Затем добавить data-bs-target="#id" Атрибут для подключения кнопки и сворачиваемого содержимого (<div id="demo">).

Комментарий:Для элемента <a> вы можете использовать href Атрибут代替 data-bs-target Атрибуты:

Пример

<a href="#demo" data-bs-toggle="collapse">Весна</a>
<div id="demo" class="collapse">
  <p>В ясный день ищу ароматы цветов у берега Сяши, безграничные пейзажи в одно мгновение становятся новыми.</p>
  <p>Всегда легко узнать лицо весны, когда вокруг цветет тысяча цветов и тысяча цветов.</p>
</div>

Попробуйте сами

По умолчанию содержимое, которое можно сворачивать, скрыто. Однако, вы можете добавить .show Класс для отображения содержимого по умолчанию:

Пример

<div id="demo" class="collapse show">
  <p>В ясный день ищу ароматы цветов у берега Сяши, безграничные пейзажи в одно мгновение становятся новыми.</p>
  <p>Всегда легко узнать лицо весны, когда вокруг цветет тысяча цветов и тысяча цветов.</p>
</div>

Попробуйте сами

Аккордеон

Ниже приведен пример расширения компонента card для отображения простой аккордеона.

Комментарий:Использование data-bs-parent Свойства гарантируют, что при отображении одного из разборчивых элементов все разборчивые элементы в указанном родительском элементе будут закрыты.

Пример

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Раздвижная группа проекта #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Весна</h3>
        <p>В ясный день ищу ароматы цветов у берега Сяши, безграничные пейзажи в одно мгновение становятся новыми.</p>
        <p>Всегда легко узнать лицо весны, когда вокруг цветет тысяча цветов и тысяча цветов.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Раздвижная группа проекта #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Конец лета в краткой строке</h3>
        <p>Пыльными уже стали красные и фиолетовые, в звуках журавлей наступила летняя пора.</p>
        <p>Проходя между лесами и коноплей, не кончается,才知道自己是太平人。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Раздвижная группа проекта #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Путешествие в горы</h3>
        <p>Верх по каменистой тропе поднимается, где среди белых облаков есть дома.</p>
        <p>Сидя в停车е, любовался вечерней красотой дубравы, листва которых краснее цветов февраля.</p>
      </div>
    </div>
  </div>
</div>

Попробуйте сами