Tworzymy FAQ, lista rozwijana Accordion

Posiadając stronę internetową firmy, często dostajemy na maila wiele pytań dotyczących naszych usług. Za każdym razem musimy na nie odpowiadać, poświęcając na to dość dużo czasu. A co jeśli utworzymy na stronie zakładkę, w której zawarte będą wszystkie pytania i odpowiedzi, które klienci najczęściej nam zadają? Czy to nie usprawni nam pracy, a klientów zaspokoi ciekawość? Albo jeśli zadadzą nam pytania na maila, możemy wysłać im link do zakładki, w której te pytania i odpowiedzi się znajdują. W tym wpisie zajmiemy się tworzeniem FAQ – listy rozwijanej Accordion.

Znalezienie ciekawej, dobrze działającej i zarówno ładnej listy rozwijanej, wcale nie jest takie proste. Sama ostatnio szukałam takiego skryptu, który będzie mi w pełni odpowiadał pod względem działania, a wygląd to już dostosowałam według gustu i kolorystyki strony. Przez lata nie miałam tej zakładki w swoim portfolio i dopiero zrozumiałam, jaki to był błąd. Przecież FAQ jest bardzo przydatne dla klienta i dla mnie. No więc zabieramy się za tworzenie.

Wklejamy kod html do szkieletu strony

Załóżmy, że macie już przygotowaną podstronę, kod html, wygląd, plik ze stylami .css. Myślę, że nie będę wrzucać za każdym razem całego szkieletu strony, po prostu wstawię tylko ten najpotrzebniejszy kod. W kodzie html podstrony wstawiamy:

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

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

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

Dla przykładu na mojej stronie użyłam takiego kodu:

<button class="accordion"><h2>Ile kosztuje strona internetowa?</h2></button>
<div class="panel">
<p>Koszt podstawowej wersji strony internetowej z cms (system samodzielnego zarządzania treścią) to 1800 zł brutto. W skład ceny wchodzi strona do 5 podstron, z niewielką ilością materiałów jak treści, zdjęcia, z formularzem kontaktowym, galerią. Każda dodatkowa podstrona to koszt od +10 zł. Każda dodatkowa funkcja na stronie wyceniania jest indywidualnie.</p>
</div>

Czyli w pierwszej linijce wstawiamy tytuł który widnieje na liście rozwijanej. Dodatkowo dodałam do niego nagłówek <h2>. Potem w <p></p> wstawiłam odpowiedź do pytania. Tak wygląda jedne pytanie z odpowiedzią. By wstawić ich więcej, należy skopiować i wkleić ten kod wiele razy i podmienić treść.

Ustawiamy wygląd listy, wstawiamy kod css do pliku .css

.accordion {
  background-color: #FFFFFF;
  color: #202f46;
  cursor: pointer;
  padding: 20px 25px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  border-bottom: 1px solid #F2F8F8;
}
.accordion h2{
  font-size: 19px;
  margin: 0;
}
.active, .accordion:hover {
  color: #F62C87;
}
.panel {
  padding: 0px 25px;
  background-color: white;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel p{
  padding: 20px 0px;
  font-size: 17px;
}
.accordion:after {
  content: "\002B"; /* Unicode character for "plus" sign (+) */
  font-size: 18px;
  color: #202f46;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\002B"; /* Unicode character for "minus" sign (-) */
  color: #FFFFFF;
}

Dodajemy kod JavaScript

Teraz musimy dodać kod JavaScript do poprawnego działania listy rozwijanej. Poniższy kod wklejamy najlepiej do założonego wcześniej pliku o nazwie accordion.js, który umieszczamy albo w folderze głównym ze stroną, albo w folderze „script”, gdzie trzymamy inne skrypty.

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

W kodzie html podstrony, przed znakiem zamykającym stronę </body> należy wkleić linijkę z kodem, który pokazuje, gdzie ten plik się znajduje:

<script src="script/accordion.js"></script>

Tak oto utworzyliśmy ciekawie wyglądający zestaw pytań i odpowiedzi w formie listy rozwijanej, która jest czytelna i praktyczna 🙂 Wygląd możecie ustawić według uznania. Koniecznie dopiszcie interlinie, bo z powyższego kodu wyszła trochę surowa wersja. Osobiście mam więcej styli css na swojej stronie, które wpłynęły na wygląd listy i ostatecznie wygląda ona tak jak na tej podstronie: https://www.stronki.pl/pytania-i-odpowiedzi.html