Na stronach dosyć często, szczególnie w dziale FAQ, możemy się zetknąć z tak zwanym akordeonem. Podobnie jak instrument muzyczny, akordeon raz się rozwija a raz zwija, dlatego równie często nazywany jest rozwijakiem czy zwijakiem.
Kliknij kilka razy na poniższym akordeonie, taki rewelacyjny efekt uzyskasz po przeczytaniu wpisu.
See the Pen xRxGXj by Tomasz Wikło (@studioleopard) on CodePen.19725
Jak możesz zobaczyć powyżej, struktura HTML jest bardzo prosta. Dwa div’y trzymające nasz akordeon z klasami accordion, accordion-items i 3 razy skopiowany nagłowek h1 z .accordion-title, wewnątrz, którego jest span z klasami bootstrapowymi aby uzyskać ikonki. Rodzeństwem nagłówka jest paragraf, to bardzo ważna informacja ponieważ wykorzystamy ten fakt w skrypcie.
Ostylowanie akordeonu
See the Pen accordion jquery by Tomasz Wikło (@studioleopard) on CodePen.19725
W powyższym kodzie nie ma absolutnie nic skomplikowanego, właściwości elementów mówią same za siebie i jak możesz zauważyć, wszystkie dotyczą rozmiaru czcionek, odstępu pomiędzy czcionkami, szerokości elementów, marginesów czy obramowania. To co w powyższym kodzie jest dla nas najważniejsze znajduje się na samym końcu – chodzi dokładnie o .accordion .accordion-items p {…; display: none }. Chcemy aby domyślnie wszystkie paragrafy akordeonu były zwinięte. Za rozwijanie będzie odpowiedzialny jQuery.
Rozwijamy paragraf
See the Pen accordion jquery by Tomasz Wikło (@studioleopard) on CodePen.19725
Cały kod. Tylko tyle jest nam potrzebne aby usprawnić akordeon. Jeżeli wcześniej nie używałeś jQuery to zapraszam do zapoznania się z artykułem Trochę interaktywności, czyli jak dodać jQuery do strony HTML.
W pierwszej funkcji, metoda .find znajdzie nam w divie z klasą .accordion wszystkie elementy div z klasą .accordion-title. W momencie kliknięcia diva z klasą .accordion-title wykona się wnętrze funkcji. $(this) w tym przypadku oznacza, kliknięty element – jeden, konkretny nagłówek. Następnie wykorzystujemy metodę .next aby odnaleźć element, który jest rodzeństwem (dalszym w kodzie HTML) nagłówka h1 – a jest nim paragraf. Więc na naszym elemencie <p> wykonujemy metodę .slideToggle. Metoda ta manipuluje właściwością display, którą wcześniej użyliśmy w CSS. Wartość właściwości display jest zapisywana i przywracana w razie potrzeby. .slideToggle manipuluje wysokością elementu przy okazji ją animując. Gdy wysokość elementu uzyska 0, to element otrzymuje właściwość display: none; i przestaje być widoczny, natomiast gdy ma większą wysokość to jest ustawiany na display: block; i ponownie staje sie widoczny na stronie.
W drugiej funkcji podmieniamy ikonki za pomocą metody .toggleClass. Bootstrap implementuje zestaw ikonek glyphicons. Dzięki temu, możemy wykorzystać przygotowane wcześniej dla nas ikonki poprzez proste dodanie klasy do elementu HTML. Jeżeli ikonka glyphicon-circle-arrow-up nie zostanie odnaleziona, to element uzyska ikonkę glyphicon-circle-arrow-down i odwrotnie. Dzięki temu, gdy akordeon jest zwinięty to mamy strzałkę do dołu, a gdy rozwinięty strzałkę do góry. W kodzie związanym z ikonkami warto zwrócić na jedną ciekawą rzecz, a chodzi dokładnie o $( “span”, this ). Zapis ten może wydawać się na początku niezrozumiały, jednak jest to tylko skrócona wersja $(this).find(‘span’) – czyli w naszym przypadku $(this) to kliknięty element z klasą .accordion-title a w nim odszukujemy elementu z klasą span i dalej do akcji wchodzi .toggleClass(‘fast’). Argument w nawiasie, to nic innego jak szybkość z jakim nasz akordeon ma się rozwijać i zwijać.
See the Pen xRxGXj by Tomasz Wikło (@studioleopard) on CodePen.19725
A oto nasze dzisiejsze dzieło.
Jako ćwiczenie zachęcam Ciebie do rozbudowania powyższego akordeonu o automatyczne zwijanie rozwiniętych paragrafów, w momencie kliknięcia innego nagłówka.
Opublikowano 21 listopada 2016 w kategorii Bez kategorii.
