Akordeon, czyli rozwijaki i zwijaki na stronę internetową

Czas czytania: 2 minut

Tym razem pokażę wam jak zrobić bardzo prosty akordeon czyli rozwijane i zwijane pola z tekstem (Collapsibles, Accordion). Element ten pozwoli nam rozmieszczać tekst na stronie w przyjazny sposób dla docelowych użytkowników.

Do czego przydaje się akordeon na stronie internetowej?

Odpowiedz jest dość prosta – aby od razu nie wyświetlać całej treści. Dzięki czemu automatycznie strona wydaje się krótsza i nie odstrasza potencjalnych odbiorców. Jednocześnie jeżeli osoba odwiedzająca stronę chce dowiedzieć się czegoś więcej jedyne co musi zrobić to kliknąć w odpowiedni przycisk. W tedy automatycznie rozwinie się pole z do tej pory ukrytą przed jego oczami treścią.

Do tworzenia akordeonów na stronie można wykorzystać różne biblioteki i frameworki. Dzięki czemu można tworzyć naprawdę zróżnicowane efekty. Kilka przykładowych opisałam już wcześniej na blogu:

• Przykładowe akordeony,
• Slider w formie akordeonu.

Nie pokazałam jednak jak w łatwy sposób można uzyskać podobny efekt mniejszy nakładem i z niższego pułapu.

Jak zrobić prosty akordeon na stronę?

Do budowy prostego akordeonu będzie nam potrzebna znajomość podstaw:

• HTML,
• CSS,
• JavaScript (nie mylić z Java).

Ułatwi wam to ewentualną rozbudowę akordeonu o kolejne elementy oraz zmianę wyglądu.

Budujemy strukturę akordeonu

Na początek stworzymy strukturę całego akordeonu w HTML:

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Sed ut perspiciatis..</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

W tym przykładzie mamy 3 rozwijane pola. Nagłówki tych pól stworzyłam w formie przycisku (<button>), ale można je zmienić np. na <div> (będzie to jednak wymagało zmian w kodzie CSS i JS). Treść jaką chcemy umieść w rozwijanym polu umieszczamy zaś w <div class="panel"></div>.

Nadajemy wygląd akordeonowi

Teraz zajmiemy się wyglądem naszego akordeonu do tego celu potrzebne nam będzie CSS.

.container{
  max-width:1200px;
  margin:0 auto;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.4s;
}

/* dodaje efekt hover i reaguje na dodanie klasy active przez JS */
.active, .accordion:hover {
  background-color: #ccc;
}

/* chowa, ukrywa obiekt z klasą panel */
.panel {
  padding: 0 18px;
  background-color: #eee;
  display: none;
  overflow: hidden;
}

Uruchomienie akordeonu w JS

Teraz musimy uruchomić akordeon, czyli dodać efekt dzięki, któremu panele po kliknięciu w przycisk będą się otwierały / wysuwały i chowały.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    /* Dodaj lub usuń klasę "active" po kliknięciu w przycisk  */
    this.classList.toggle("active");

    /* Zmień pomiędzy zwiniętym a rozwiniętym */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Powyższy kod powinien uruchomić akordeon. W kodzie umieszczone są notatki na temat tego jaką funkcję pełni dana część kodu.

See the Pen Accordion by Aura (@Julka85) on CodePen.