DIV durch klicken auf und zu

[Yael]

Sorry, hab noch eine kleine Frage, ist es möglich ohne JavaScript ein DIV durch einen Klick einzublenden bzw. wenn es offen ist wieder auszublenden? Sollte auch funktionieren, wenn man es kleiner zieht und über sein Handy / Tablet bedient. Sollte es nur über JavaScript möglich sein, gibt es fertige Lösungen?

[Der Martin]

Hallo,

Sorry, hab noch eine kleine Frage, ist es möglich ohne JavaScript ein DIV durch einen Klick einzublenden bzw. wenn es offen ist wieder auszublenden?

ja, unter gewissen Voraussetzungen. Du brauchst ein Element, das auf den Kick reagiert und den Zustand auch in irgendeiner Weise "speichert". Außerdem müssen diese beiden Zustände mit CSS unterscheidbar sein (z.B. durch Pseudoklassen), und das Element muss mit dem div-Container, den du ein- und ausblenden willst, in einem geeigneten "Verwandtschaftsverhältns" stehen, so dass man es zusammen mit dem klicksensitiven Element gemeinsam in einem kombinierten Selektor formulieren kann. *tieflufthol*

Das war viel auf einmal. ;-)
Vielleicht wird's an einem Beispiel deutlich. Nehmen wir zunächst einen einfachen Fall: Wir "missbrauchen" eine Checkbox zusammen mit ihrem Label.

<label for="showhide">Klicken zum Ein- oder Ausblenden</label>  
...  
...  
<input type="checkbox" id="showhide">  
<div>Dieser Block wird abhängig vom Zustand der unsichtbaren Checkbox ein- und ausgeblendet.</div>

Ein bisschen CSS dazu (nur der funktionsrelevante Teil):

#showhide  
 { display: none;               /* Checkbox generell unsichtbar machen */  
 }  
  
#showhide + div  
 { display: none;               /* div-Container zunächst unsichtbar */  
 }  
  
#showhide:checked + div  
 { display: block;              /* div-Container sichtbar, wenn Checkbox aktiv */  
 }

Da hier die Verbindung des label-Elements mit seinem Control nicht durch die DOM-Struktur, sondern über das for-Attribut hergestellt wird, kann das ein- und ausgeblendete div-Element sogar ganz woanders stehen als das label-Element, das den Klick empfängt.

Sollte auch funktionieren, wenn man es kleiner zieht und über sein Handy / Tablet bedient.

Sollte mit dem Beispiel gegeben sein, wobei ich mangels Erfahrung mit Touch-Geräten keine Ahnung habe, wie dort normalerweise Checkboxen bedient werden; vermutlich aber entsprechend dem Klick durch einfaches Antippen. Das sollte dann also auch problemlos funktionieren (Größenänderung sowieso).

Eine Variante des gezeigten Prinzips wäre auch, auf :focus eines focussierbaren Elements zu reagieren. Dann müsste man keine label/checkbox-Kombination zweckentfremden. Aber wie sieht es mit :focus bei Touch-Geräten aus? Schlecht, oder?

Ciao,
 Martin