2.1 #Components.Accordion Accordion
Rozwijane sekcje FAQ. Gładka animacja max-height, rotacja ikony chevron.
JS: src/js/modules/accordion.js. Requires data-accordion on container.
Deep-link: strona.html#id-itemu → scroll + auto-open.
Example
Strona winston.pl jest przeznaczona wyłącznie dla osób pełnoletnich (18+). Podczas rejestracji weryfikujemy wiek za pomocą bankowości elektronicznej.
Hasło zresetujesz w ustawieniach profilu. Możesz to zrobić również na stronie logowania – kliknij „Nie pamiętasz hasła?" i podaj swój adres e-mail.
W każdej chwili możesz zmienić swoje dane osobowe. Aby to zrobić, ponownie zweryfikuj swoją tożsamość poprzez bankowość elektroniczną lub w razie potrzeby skontaktuj się z nami.
Markup: accordion.html
<div style="max-width: 1260px; margin: 0 auto; padding: 40px 0;">
<div class="accordion" data-accordion>
<div class="accordion__item">
<button class="accordion__header" type="button">
<span class="accordion__title">Kto może korzystać ze strony?</span>
<svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
</svg>
</button>
<div class="accordion__body">
<div class="accordion__content">
Strona <strong>winston.pl</strong> jest przeznaczona wyłącznie dla osób pełnoletnich (18+). Podczas rejestracji weryfikujemy wiek za pomocą bankowości elektronicznej.
</div>
</div>
</div>
<div class="accordion__item">
<button class="accordion__header" type="button">
<span class="accordion__title">Jak mogę zmienić hasło?</span>
<svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
</svg>
</button>
<div class="accordion__body">
<div class="accordion__content">
Hasło zresetujesz w <a href="#">ustawieniach profilu</a>. Możesz to zrobić również na stronie logowania – kliknij „<strong>Nie pamiętasz hasła?</strong>" i podaj swój adres e-mail.
</div>
</div>
</div>
<div class="accordion__item">
<button class="accordion__header" type="button">
<span class="accordion__title">Jak mogę zaktualizować dane w profilu?</span>
<svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
</svg>
</button>
<div class="accordion__body">
<div class="accordion__content">
W każdej chwili możesz zmienić swoje dane osobowe. Aby to zrobić, ponownie zweryfikuj swoją tożsamość poprzez bankowość elektroniczną lub w razie potrzeby skontaktuj się z nami.
</div>
</div>
</div>
</div>
</div>
Source:
src/scss/components/_accordion.scss, line 1