Zwijanie Bootstrap 5

Podstawowe zwijanie

Kiedy chcesz ukrywać i wyświetlać dużą ilość treści, komponent zwijany jest bardzo użyteczny:

Przykłady

<button data-bs-toggle="collapse" data-bs-target="#demo">Wiosna</button>
<div id="demo" class="collapse">
  <p>W słoneczny dzień szukam zapachów w rzece Si, nieskończone widoki są nowoczesne.</p>
  <p>Bez trudu rozpoznaję twarz wiatru wiosennego, cała różnorodność to wiosna.</p>
</div>

Spróbuj sam

Przykład wyjaśnia

.collapse Klasa wskazuje na element zwijany (w naszym przykładzie to <div>); poprzez kliknięcie przycisku, można wyświetlić lub ukryć zawartość.

Aby kontrolować (wyświetlanie/ukrywanie) zawartości zwijanej, dodaj data-bs-toggle="collapse" Atrybut dodać do elementu <a> lub <button>. Następnie dodać data-bs-target="#id" Atrybut do połączenia przycisku z zawartością zwijaną (<div id="demo">).

Komentarz:Dla elementu <a>, możesz użyć href Atrybut zastępuje data-bs-target Atrybuty:

Przykłady

<a href="#demo" data-bs-toggle="collapse">Wiosna</a>
<div id="demo" class="collapse">
  <p>W słoneczny dzień szukam zapachów w rzece Si, nieskończone widoki są nowoczesne.</p>
  <p>Bez trudu rozpoznaję twarz wiatru wiosennego, cała różnorodność to wiosna.</p>
</div>

Spróbuj sam

Domyślnie, zawartość zwijana jest ukryta. Ale możesz dodać .show Klasa do domyślnego wyświetlania treści:

Przykłady

<div id="demo" class="collapse show">
  <p>W słoneczny dzień szukam zapachów w rzece Si, nieskończone widoki są nowoczesne.</p>
  <p>Bez trudu rozpoznaję twarz wiatru wiosennego, cała różnorodność to wiosna.</p>
</div>

Spróbuj sam

Akordeon

Poniższy przykład pokazuje, jak rozszerzyć komponent card, aby wyświetlić prosty akordeon.

Komentarz:Użycie data-bs-parent Atrybuty zapewniają, że gdy jeden z elementów rozwijanych jest wyświetlany, wszystkie inne rozwijane elementy w określonym rodzicu zostaną zamknięte.

Przykłady

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Foldable group item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Wiosna</h3>
        <p>W słoneczny dzień szukam zapachów w rzece Si, nieskończone widoki są nowoczesne.</p>
        <p>Bez trudu rozpoznaję twarz wiatru wiosennego, cała różnorodność to wiosna.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Foldable group item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Wiersz na początku lata</h3>
        <p>Cały świat róż i fioletów stał się pyłem, nowa pora lata zaczyna się w dźwięku kruka.</p>
        <p>Idę przez sadzone na poboczu morwy i konopi, zrozumiałem, że jestem mieszkańcem pokojnego świata.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Foldable group item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Podróż na górę</h3>
        <p>Daleko na zimnych wzgórzach kamiennej drogi są strome, gdzie białe chmury rodzą się w domach.</p>
        <p>Usiądź przy parkingu, pokochaj wieczór w lesie, liście pokryte śniegiem są czerwonejsze niż kwiaty w lutym.</p>
      </div>
    </div>
  </div>
</div>

Spróbuj sam