Text/Tabelle/Bild einklappen bei mobilem Endgerät

[Whiz-zarD]

Mit CSS alleine kommst du auch nicht weit. Dafür brauchst du schon JavaScript.
Du könntest das JavaScript-Framework jQuery verwenden. Die Funktion toggle() kann HTML-Elemente ein- und ausblenden.

[Pepo]

Hey,

ich hab jetzt doch noch etwas mit CSS rumprobiert.

Mit folgendem Code kann ich das Element immerhin schon mal verstecken wenn das Endgerät unter 640px liegt:

HTML-Code:

#nav {
        
}
    
@media screen and (max-width: 640px) {
 
#nav {   
        
        display: none;
        
}
}

Gibt es hier wirklich keine Möglichkeit ins CSS statt "display: none;" einen Button einzubinden der das Element erst hinter sich versteckt und beim drauf tippen aufklappt?

Ich würde gerne auf JS verzichten.

[Whiz-zarD]

Wie ich gerade sehe, gibt es ab CSS3 evtl. doch eine Möglichkeit.
Im folgenden Artikel wird erklärt, wie dies funktioniert. Ob alle gängigen Browser dies unterstützen weiß ich allerdings nicht:
Creating a toggle feature using :checked pseudo class

Dies ist aber mehr ein Workaround, weil eine Checkbox dafür missbraucht wird. Die Semantik des HTML-Elementes ist somit falsch.
Für gewöhnlich löst man dies mit JavaScript, indem man sich an den OnClick-Event eines Buttons registriert.