Eine Klapp­orgie mit jQuery

Wozu diese Demo?

Beliebige Blockelement (div, p, ol, ul usw.) auf- und zuklappen. Im Quellcode muss zu diesem Zweck nur der zu klappende Bereich mit der Klasse "toklapp" ausgezeichnet werden. Alles andere erledigt JavaScript / jQuery / CSS.

Die Navigation beinhaltet ein auf- und zuklappbares Menü mit 3 Ebenen. Hinweis: Unter 550 px Breite (z.B. Smartphone Hochformat) wird die Navigation zum "Hamburger-Menü".

Selbstverständlich ist die gezeigte Technik valides HTML und CSS, sowie barrierefrei und responsive.

Beispiele:

Ein Div

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

Listenüberschrift

(Auch eine Überschrift kann natürlich das Klappen steuern)

Etwas statischer Text dazwischen:

Ein <p> Absatz

Und hier Lorem 2

Jetzt eine Tabelle.
(Hinweis: Eine Tabelle kann nicht jQuery slideDown/ -Up. Daher wird die Tabelle in ein div gepackt.)

Saison A Vor-/Nachsaison Saison B Hauptsaison
01.03. - 20.05.
20.09. - 31.10.
20.05. - 23.09.
48,- € 51,- €

und ein Bild

Yosemite National Park

Beschreibung zu dieser Demo