Accordion Bootstrap 5

Описание

Вертикально сворачивающийся аккордеон JS, который работает с плагином Collapse.

Название

Accordion Bootstrap 5

Аккордеон HTML

Фреймворк

Bootstrap 5

Группа

Компоненты (components)

Источник

Accordion Bootstrap 5

Языки программирования

CSS, HTML, JavaScript, Sass, Less

Принцип

Как это работает?: Аккордеон использует collapse внутри, чтобы сделать его складным. Для визуализации аккордеона, добавьте класс .open в .accordion.

Аккордеон JS пример 3 секции

Пример аккордеон JS на 3 секции с H2 заголовками. Попробуйте развернуть и свернуть содержимое аккордеона по щелчку. ID: 3h2WP

Аккордеон текст пример 1 — Аккордеон Bootstrap 5

Аккордеон текст пример 2

Аккордеон текст пример 3

Готовый аккордеон HTML код скопируйте и вставьте на любой сайт Bootstrap 5.

<div class="accordion accordion-flush" id="accordionFlush3h2WP">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-heading3h2WP1">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse3h2WP1" aria-expanded="false" aria-controls="flush-collapse3h2WP1">
        Аккордеон заголовок 1
      </button>
    </h2>
    <div id="flush-collapse3h2WP1" class="accordion-collapse collapse" aria-labelledby="flush-heading3h2WP1" data-bs-parent="#accordionFlush3h2WP">
      <div class="accordion-body">Аккордеон текст пример 1 - Аккордеон Bootstrap 5</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-heading3h2WP2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse3h2WP2" aria-expanded="false" aria-controls="flush-collapse3h2WP2">
        Аккордеон заголовок 2
      </button>
    </h2>
    <div id="flush-collapse3h2WP2" class="accordion-collapse collapse" aria-labelledby="flush-heading3h2WP2" data-bs-parent="#accordionFlush3h2WP">
      <div class="accordion-body">Аккордеон текст пример 2</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-heading3h2WP3">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse3h2WP3" aria-expanded="false" aria-controls="flush-collapse3h2WP3">
        Аккордеон заголовок 3
      </button>
    </h2>
    <div id="flush-collapse3h2WP3" class="accordion-collapse collapse" aria-labelledby="flush-heading3h2WP3" data-bs-parent="#accordionFlush3h2WP">
      <div class="accordion-body">Аккордеон текст пример 3</div>
    </div>
  </div>
</div>

Аккордеон JS пример 10 секций

Пример аккордеон JS на 10 секций с p параграфами. Попробуйте развернуть и свернуть содержимое аккордеона по щелчку. ID: 10pWP

Аккордеон 1 — Аккордеон Bootstrap 5

Аккордеон 2

Аккордеон 3

Аккордеон 4

Аккордеон 5

Аккордеон 6

Аккордеон 7

Аккордеон 8

Аккордеон 9

Аккордеон 10

<div class="accordion accordion-flush" id="accordionFlush10pWP">
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP1">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP1" aria-expanded="false" aria-controls="flush-collapse10pWP1">
        Аккордеон 1
      </button>
    </p>
    <div id="flush-collapse10pWP1" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP1" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 1 - Аккордеон Bootstrap 5</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP2">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP2" aria-expanded="false" aria-controls="flush-collapse10pWP2">
        Аккордеон 2
      </button>
    </p>
    <div id="flush-collapse10pWP2" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP2" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 2</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP3">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP3" aria-expanded="false" aria-controls="flush-collapse10pWP3">
        Аккордеон 3
      </button>
    </p>
    <div id="flush-collapse10pWP3" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP3" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 3</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP4">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP4" aria-expanded="false" aria-controls="flush-collapse10pWP4">
        Аккордеон 4
      </button>
    </p>
    <div id="flush-collapse10pWP4" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP4" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 4</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP5">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP5" aria-expanded="false" aria-controls="flush-collapse10pWP5">
        Аккордеон 5
      </button>
    </p>
    <div id="flush-collapse10pWP5" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP5" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 5</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP6">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP6" aria-expanded="false" aria-controls="flush-collapse10pWP6">
        Аккордеон 6
      </button>
    </p>
    <div id="flush-collapse10pWP6" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP6" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 6</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP7">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP7" aria-expanded="false" aria-controls="flush-collapse10pWP7">
        Аккордеон 7
      </button>
    </p>
    <div id="flush-collapse10pWP7" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP7" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 7</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP8">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP8" aria-expanded="false" aria-controls="flush-collapse10pWP8">
        Аккордеон 8
      </button>
    </p>
    <div id="flush-collapse10pWP8" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP8" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 8</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP9">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP9" aria-expanded="false" aria-controls="flush-collapse10pWP9">
        Аккордеон 9
      </button>
    </p>
    <div id="flush-collapse10pWP9" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP9" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 9</div>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-header" id="flush-heading10pWP10">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10pWP10" aria-expanded="false" aria-controls="flush-collapse10pWP10">
        Аккордеон 10
      </button>
    </p>
    <div id="flush-collapse10pWP10" class="accordion-collapse collapse" aria-labelledby="flush-heading10pWP10" data-bs-parent="#accordionFlush10pWP">
      <div class="accordion-body">Аккордеон 10</div>
    </div>
  </div>
</div>

Accordion Bootstrap 5 — аккордеон JS HTML код