Akordeon – rozwijaki i zwijaki na stronie

acordeon

Kategoria wpisu Frontend, Inspiracje, Kurs CSS, Kursy Tagi: , , , , , , on przez .



Reading Time: 2 minutes

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

Przeczytaj również

Proste rozwijane poziome menu w CSS W tym tygodniu pokażę wam jak zbudować proste poziome rozwijane menu (ang. top dropdown) korzystając z CSS i HTML. Dla nie wtajemniczonych chodzi o ta...
Ciekawe biblioteki z animacjami, które odmienią tw... Dobrym i sprawdzonym sposobem na "ożywienie" strony internetowej jest zastosowanie na niej różnych animacji. Właściwie dobrane i umiejscowione zmienią...
Właściwość CSS tab-size Właściwość CSS tab-size określa ilość spacji jakie zajmuje tabulator. W HTML znak tabulacji jest zwykle wyświetlany jako pojedynczy znak spacji, z wy...
Kierunek pisania tekstu właściwość direction / uni... Własność direction służy do ustawiana kierunku pisania tekstu. Przydatna jest np. w przypadku kiedy chcemy napisać, stworzyć stronę w innym języku ta...