HTML5 und <details>

[blondes-gift]

In HTML5 kann man Inhalte mit "details" ein- und ausklappen.

Beim ersten Aufruf eingeklappt:

Code: Alles auswählen

<details>
   <summary>Überschrift</summary>
   <p>Hier der wegklappbare Content</p>
</details>

Beim ersten Aufruf über "details open" ausgeklappt:

Code: Alles auswählen

<details open>
   <summary>Überschrift</summary>
   <p>Hier der wegklappbare Content</p>
</details>

Ob der Inhalt beim ersten Aufruf ein- oder ausgeklappt dargestellt wird möchte ich aber nicht in html, sondern über CSS steuern, um das Verhalten zwischen Mobile ind Non-Mobile zu differenzeieren. Hat jemand eine Idee wie man das hinbekommt?

[SloMo]

Das Element öffnet über das open-Attribut. In CSS kannst Du es per details[open] ansprechen. Ob sich damit das Verhalten umkehren lässt, ließe sich ja ausprobieren.

Es würde ungefähr so gehen:

Code: Alles auswählen

details[open] summary {display: block;}
...

Da der Browser-Support spärlich und jung ist, würde ich mit Kompatibilitätsproblemen rechnen und statt dessen zu jQuery greifen.

[nerd]

Ob der Inhalt beim ersten Aufruf ein- oder ausgeklappt dargestellt wird möchte ich aber nicht in html, sondern über CSS steuern, um das Verhalten zwischen Mobile ind Non-Mobile zu differenzeieren. Hat jemand eine Idee wie man das hinbekommt?

Nicht getestet, aber ich wuerde mal sagen dass du <details><summary> als zugeklappt definieren muss, und mit [open] ueberschreibst du es spaeter nur als offen.

also in css:

Code: Alles auswählen

details summary {display: none;} 
details[open] summary {display: block;} 

Allerdings sehe ich den sinn hinter diesem element nicht ganz. Mit <div> liese sich das ganze ja auch umsetzen, und damit funktioniert es auch in anderen browsern.
IE, Edge und Opera Mini unterstuetzen Details & Summary elements derzeit nicht.

[blondes-gift]

Das klappt nicht.

Das wird auf ein zugeklapptes Element angewendet:

Code: Alles auswählen

details summary {;}

Das hier wird auf ein aufgeklapptes Element angewendet:

Code: Alles auswählen

details[open] summary {;} 

Beide sorgen aber nicht dafür das das Element auf- bzw. zugeklappt angezeigt wird, sondern nur wie es im jeweiligen Zustand designed wird.

[top]

Schon mal probiert, ob du das open bei der Mobile-Ansicht (oder bei der Desktop-Ansicht) per js ergänzen kannst?

[nerd]

Ja, eben. Normalerweise ist HTML selbst nicht interaktiv und kann auch selbst keine klassen oder attribute aendern - das musst du selbst mit js machen.

Code: Alles auswählen

$("details").click(function(){
$(this).toggleClass("open");
});

... oder so aehnlich