Text/Tabelle/Bild einklappen bei mobilem Endgerät

Hi, ich hätte eine Frage.

Ich gestaltet momentan eine kleine Website auf Jimdo.

Leider hab ich von HTML nicht wirklich Plan.

Ich habe folgendes Problem:

Ich habe z. B. eine Tabelle oder auch einen Text. Ich möchte das dieser wenn das Endgerät ein Handy ist und die Display-Größe unter 640px ist diese Tabelle hinter einem Button versteckt wird.

Wenn man auf diesen Button klickt soll das ganze ausklappen/erscheinen. Idealerweise sollte danach ein Button erscheinen mit dem das ganze wieder einklappbar/hinter dem ersten Button versteckbar ist.

Hab schon mit mehreren CSS rumprobiert aber leider hab ich nichts gefunden was meinen Bedürfnissen entspricht.

Ich wäre für Hilfe wirklich sehr dankbar da ich momentan leider wirklich keine Zeit und Kraft habe mich großartig in HTML einzuarbeiten

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.

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.

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.