Accordion / <details> <summary> & Co.

[marctrix]

Hej einsiedler,

Nun habe ich aber ein Paar Fragen: A)
Wie schafft man so eine Art Weiche mit @media, wenn der Browser <details> & <summary>
versteht? Das DANN eben <details> & <summary> normal angewendet wird. Als Fallback soll dann eben das java-script aktiv werden, wenn das NICHT der Fall ist. Wäre es Dann noch sinnvoll wenn java-script deaktiviert ist, dass dann <details open> aktiv wird? was meint ihr? Oder braucht man das gar nicht?

Gibt es wie gesagt als fertige Lösung auf html5please.com

B)
Wie bekomme ich es hin wenn man auf weiter scrollen klickt das sich dann das
"weiter lesen..." zu "wieder zuklappen..." wandelt. Dazu benötige ich Pseudoelemente + display:hidden; und ::before & ::after ist das richtig? Aber wie geht das dann?

Du reagierst auf das Vorhandensein oder Fehlen von open…

[open]::before {
  content: 'Dein Text';
}

Aber genau das gehört da eigentlich nicht rein - höchstens zusätzlich. summary ist eine Zusammenfassung, wie der Name schon sagt. Darf laut Spec auch ein Überschriften-Element enthalten.

Marc