Pures CSS Accordion Demo (CSS3 HTML5)
KRKTX00: Demo eines Accordion der rein mit CSS3 Transitionen gestaltet ist und komplett ohne jQuery auskommt.
Wofür benötigt man einen Accordion?
Ein Accordion eignet sich sehr gut um bspw. bei Produktseiten in einem Onlineshop Informationen zu bündeln und dem Nutzer nicht unnötig viele Inhalte von vornherein anzuzeigen. Er kann sich schließlich dann die Inhalte, die ihn interessieren selbst zum lesen auswählen.
Was sagt Google dazu?
Ist das Verstecken von Elementen nicht gegen Googles Richtlinien? Ja eigentlich schon. Es heißt, man solle nicht übertreiben. Zur Not wird ein Quality Rater entscheiden, ob der versteckte Text zur Manipulation führen sollte oder der User Experience dient.
Wie wird der Inhalt verborgen?
In diesem Fall wird ein div statt mit display:none mit height:0px angegeben
Warum heißts Accordion?
Nein, ein CSS Accordion macht keine Musik, aber es ähnelt optisch einem echten Accordion. Einzelne Elemente lassen sich ein und ausklappen, so dass kein unnötiger Platz verschwendet wird.
ID zur Klassiffizierung
Die ID dieses CSS3 Accordion lautet: XdfRGh20Z
Original von Paul Hayes
WICHTIG: Dieses Accordion funktioniert nicht mit IE < 9