Akordeon / Collapse

Sprawdź najnowszą wersję komponentu collapse zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Ten wpis właściwie powinien się nazywać inaczej ale nie znam krótkiego polskiego określenia na ów element:) Natomiast jest on używany przy tworzeniu akordeonów, więc będzie Wam łatwiej trafić:) Collapse pozwala nam na wyświetlenie treści jakiegoś diva dopiero po kliknięciu w odpowiedni przycisk czy link. Jest to bardzo często używane przy tworzeniu sekcji FAQ gdzie wyświetlamy tylko pytania a użytkownik po kliknięciu w nie uzyska odpowiedź. Dzięki temu unikamy ściany tekstu, szczególnie przy bardzo wielu elementach.

Podstawowy przykład

Aby stworzyć element Collapse musimy mieć linka pod dowolną postacią, czy to tekstu, czy buttona oraz diva z unikalnym identyfikatorem. Pokazywanie/ukrywanie treści możemy wykonywać za pomocą linkowania do diva z identyfikatorem lub poprzez atrybut data-collapse. Każdy ukryty div musi mieć unikalny identyfikator, w przeciwnym razie kliknięcie w jeden button rozwinie wszystkie zamiast wybranego. Przebiega to następująco:

Dla linkowania:
Tworzymy link z odpowiednimi elementami:

• data-toggle="collapse" – atrybut wskazuje, że nasz link będzie służył do pokazywania treści.
• href="#ukryta-tresc" – adres naszego linka musi kierować do identyfikatora diva z treścią.

Dla atrybutu data-collapse:
Tworzymy link z odpowiednimi elementami:

• data-toggle="collapse" – atrybut wskazuje, że nasz link będzie służył do pokazywania treści.
• data-target="#ukryta-tresc" – atrybut data-collapse musi kierować do identyfikatora diva z treścią.

W przykładzie, dla lepszej czytelności użyję buttonów.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#ukryta-tresc" aria-expanded="false" aria-controls="ukryta-tresc">
    Link z href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ukryta-tresc" aria-expanded="false" aria-controls="ukryta-tresc">
    Link z data-target
  </button>
</p>
<div class="collapse" id="ukryta-tresc">
  <div class="card card-body">
    To jest treść diva, która pokazuje się bądź ukrywa po kliknięciu w powyższe buttony.
  </div>
</div>

Akordeon

Jak pisałem na początku wpisu, collapse używa się często do tworzenia akordeonów. Pokażę jak uzyskać taki efekt z użyciem kart. Podobnie jak w przypadku karuzeli, cały kod jest dość długi ale zawsze możecie go kopiować a nazwy klas są intuicyjne, więc bez problemu będziecie wiedzieli co modyfikować. Zaczynajmy.
Pierwszym elementem jest wrapper z unikalnym identyfikatorem (np. #akordeon-faq). W jego wnętrzu musimy stworzyć nową kartę, otworzymy sobie zatem diva z klasą .card. Naszym linkiem służącym do pokazania treści będzie nagłówek karty. Tworzymy zatem diva z klasą .card-header w nim umieszczając nagłówek <h*> o wybranej przez nas ważności/wielkości. Wewnątrz nagłówka trzeba stworzyć linka, którego kliknięcie pokaże nam ukrytą zawartość. Link ten musi mieć obowiązkowe wartości czyli atrybut data-toggle="collapse" oraz adres do identyfikatora naszej ukrytej treści href="#pierwsza-odpowiedz" (zamiast href możecie oczywiście użyć data-target). Zamykamy teraz diva z klasą .card-header. Następnym elementem jest div z ukrytą treścią, on również musi mieć obowiązkowe elementy jak unikalny identyfikator ( w przypadku pierwszego elementu będzie to #pierwsza-odpowiedz ) oraz klasę .collapse. Wewnątrz tego diva umieszczamy ciało naszej karty czyli diva z klasą .card-body a w jego wnętrzu odpowiedź na pytanie zawarte w nagłówku. Zamykamy div z klasą .card-body, zamykamy div z unikalnym identyfikatorem, zamykamy div z klasą .card i powtarzamy wyżej wymienione czynności dla kolejnego elementu (czyli kopiujemy całą treść diva z klasą .card i zmieniamy nagłówek oraz link w nim zawarty, unikalny identyfikator oraz treść karty). Po dodaniu wymaganej liczby elementów zamykamy diva z identyfikatorem naszego akordeonu.

Ja w przykładach stosuję polskie nazwy klas byście łatwo odnaleźli opisywane elementy. Pamiętajcie, że w IT językiem „urzędowym” jest angielski i nazwy klas, identyfikatorów, atrybutów czy komentarze muszą być pisane w tym języku. Chodzi w tym, między innymi o to, że jeśli kiedyś przyjdzie Wam pracować w międzynarodowym zespole to sami nie chcieli byście aby kod, który otrzymacie był po włosku, norwesku czy jakimkolwiek języku, którego nie znacie.

<div id="#akordeon-faq" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="pierwsze-pytanie">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#akordeon-faq" href="#pierwsza-odpowiedz" aria-expanded="true" aria-controls="pierwsza-odpowiedz">
          Pierwsze pytanie
        </a>
      </h5>
    </div>

    <div id="pierwsza-odpowiedz" class="collapse in" role="tabpanel" aria-labelledby="pierwsze-pytanie">
      <div class="card-body">
        To jest odpowiedź na pierwsze pytanie
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="drugie-pytanie">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#akordeon-faq" href="#druga-odpowiedz" aria-expanded="false" aria-controls="druga-odpowiedz">
          Drugie pytanie
        </a>
      </h5>
    </div>
    <div id="druga-odpowiedz" class="collapse" role="tabpanel" aria-labelledby="drugie-ytanie">
      <div class="card-body">
        To jest odpowiedź na drugie pytanie.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="trzecie-pytanie">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#akordeon-faq" href="#trzecia-odpowiedz" aria-expanded="false" aria-controls="trzecia-odpowiedz">
          Trzecie pytanie
        </a>
      </h5>
    </div>
    <div id="trzecia-odpowiedz" class="collapse" role="tabpanel" aria-labelledby="trzecie-pytanie">
      <div class="card-body">
        To jest odpowiedź na trzecie pytanie.
      </div>
    </div>
  </div>
</div>