acordeon
| | |

Akordeon – rozwijaki i zwijaki na stronie

przezAurelia Sypniewska
Czas czytania: 2 minut

Z akordeonem możemy spotkać się na różnych stronach internetowych. Najczęściej w dziale FAQ – gdzie z jego pomocą możemy rozwinąć odpowiedz na nasze pytanie. Akordeon działa więc podobnie jak instrument noszący jego nazwę (rozwija się i zwija). To oczywiście najbardziej charakterystyczny przykład tego elementu, ale nie jedyny. Akordeony świetnie sprawdzają się także w innych miejscach gdzie np. mamy mało miejsca.

Postaram się dzisiaj pokazać kilka przykładowych akordeonów jakie można znaleźć w internecie.

CSS + HTML only Accordion Element

Autor: Alex Bergin
Akordeon wykonany jedynie w CSS i HTML bez użycia skryptów jQuery czy Javascript

CSS Accordion: Radio Button Hack (Fixed Height)

Autor: Jon Yablonski
Rozwijany akordeon, w którym tylko jedno pole może być aktualnie otwarte.

simple css accordion with hover effects

Autor: vavik
Akordeon działający po najechaniu kursorem myszki.

Skewed CSS Accordion

Autor: Gerald De Leon
Ciekawy ukryty akordeon dostępny dopiero po najechaniu kursorem myszki na element.

See the Pen Skewed CSS Accordion by Gerald De Leon (@gdeleon101) on CodePen.0

Accordion table

Autor: Adam
Kolejnym przykładem akordeonu jest rozwijana tabela. Jest to bardzo dobry przykład na to jak można zaoszczędzić dużo miejsca jednocześnie pozwalając przeglądającej osobie na rozwinięcie dodatkowych danych.

See the Pen Accordion table by Adam (@adahei) on CodePen.0

Pure CSS Horizontal Accordion

Autor: Ren Aysha
Przykładowy socjal akordeon rozwijany horyzontalnie, po szerokości strony.

See the Pen Pure CSS Horizontal Accordion by Ren Aysha (@rrenula) on CodePen.0

Sexy Accordion

Autor: Srdjan Pajdic

See the Pen Sexy Accordion by Srdjan Pajdic (@MightyShaban) on CodePen.0

CSS Responsive animated Accordion

Autor: Chris Wright

See the Pen CSS Responsive animated Accordion by Chris Wright (@chriswrightdesign) on CodePen.0

Znacie inne ciekawe przykłady zastosowania akordeonu na stronie możecie podzielić się nimi w komentarzu.

Dodatkowe tagi:
Collapse, FAQ
rozwijaki i zwijaki
gotowe rozwiązania
przykładowe realizacje