dave: Akkordeon mit CSS

Beitrag lesen

SELF-Forum

Akkordeon mit CSS

dave
– Informationen zu den Bewertungsregeln

Hi,

ich möchte ein Akkordeon bauen dass allein mit CSS funktioniert.
Meine Idee war die Header der einzelnen Akkordeon-Tabs als label zu deklarieren die Radiobuttons auswählen.
Über die Radiobuttons kann ich dann rausfinden welcher Inhalt angezeigt werden soll.

Ein Beispiel, ungetestet und nur runtergeschrieben zur besseren Veranschaulichung was ich meine:

  
<!doctype html>  
<html>  
<head>  
	<title></title>  
	<link rel="stylesheet" href="/styles.css">  
</head>  
<body>  
	<label for="akkTab1">Akkordeon Tab Eins</label>  
	<input type="radio" id="akkTab1" name="akkoredeon"/>  
	<div>  
		Akkordeon Inhalt 1  
	</div>  
	  
	<label for="akkTab2">Akkordeon Tab Zwei</label>  
	<input type="radio" id="akkTab2" name="akkoredeon"/>  
	<div>  
		Akkordeon Inhalt 2  
	</div>  
</body>  
</html>

Das CSS:

  
[name=akkordeon] + div {  
	display:none;  
}  
[name=akkordeon]:checked + div {  
	display:block;  
}

Dass das in veralteten Browsern nicht funktioniert ist mir genauso klar wie egal.

Meine Frage ist nun, was ihr von diesem Ansatz haltet?
Sind die inputs so unsemantisch dass ihr darauf verzichten würdet und es über JS lösen würdet (ich finde sie nicht komplett unsemantisch, da sie ja eindeutig anzeigen welcher inhalt _gewählt_ wurde)?
Oder was ist an dieser Möglichkeit noch schlecht, was ich vergessen habe?

~dave

Beitrag melden
–
Informationen zu den Bewertungsregeln