Zyrex

Accordion w Bootstrapie

Accordion to komponent interfejsu użytkownika w frameworku Bootstrap, który umożliwia ukrywanie i pokazywanie zawartości w sekcjach po kliknięciu na nagłówek sekcji. Jest to przydatne, gdy chcesz zaprezentować dużo informacji w małej przestrzeni, ale nie chcesz zaśmiecać strony zbyt wieloma elementami.

Aby dodać accordion do swojej strony, musisz użyć odpowiedniej struktury HTML i klas CSS z frameworka Bootstrap. W przypadku accordiona potrzebujesz co najmniej dwóch sekcji – jednej dla nagłówka i jednej dla zawartości. Możesz dodać ile chcesz sekcji, w zależności od ilości informacji, które chcesz pokazać.

Oto przykład kodu HTML dla accordiona z dwoma sekcjami:

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Nagłówek sekcji 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Zawartość sekcji 1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Nagłówek sekcji 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Zawartość sekcji 2
      </div>
    </div>
  </div>
</div>