@@Camping_RIDER > Nur als Ergänzung... Die einer weiteren bedarf. > > Ja, indem du beim Klick auf den Button die [display-Eigenschaft](https://wiki.selfhtml.org/wiki/Display#none:_Keine_Box) per [Javascript (style-Eigenschaft)](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/element/style) änderst, alternativ kannst du die Klasse ändern und damit `display:none;` bzw. `display:block;` setzten. > > Im Allgemeinen ist Letzteres besonders empfehlenswert, da bei der ersten Variante (direktes Ändern per JavaScript) Probleme auftauchen können - so ist es bspw. in den meisten Browsern nicht ohne weiteres möglich, eine solche direkte Änderung wieder rückgängig zu machen Nein? Doch. Oh! `<HTMLElement>.style.display = '';`{: .language-js style="white-space: nowrap"} sollte Änderungen durch JavaScript rückgängig machen und `display` auf den im Stylesheet (das kann auch das Browserstyleet sein) angegebenen Wert zurücksetzen. Und zwar in den meisten (lies: allen?) Browsern. > Die Klassen-Lösung ist da **deutlich** flexibler, **plus** separation of concerns Die Angabe, **wie** etwas dargestellt wird, gehört unzweifelhaft ins Stylesheet. Darum geht’s hier aber nicht; sondern darum, **ob** etwas dargestellt wird. Und das darf sich durchaus im Markup/DOM wiederspiegeln. _Separation of concerns_{: lang="en"} ist hier nicht _per se_ ein Grund gegen Inline-`style`-Attribute. > Statt Klassen **könnten** (falls angebracht) auch [data-\*](http://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/data-*)-Attribute eingesetzt werden, Was für _Daten_ sollten da drinstehen? `data-hidden="true"`?? > Klassen sind aber im Allgemeinen einfacher zu handeln. Inwiefern wäre `[class~="hidden"]`{: .language-css style="white-space: nowrap"} „einfacher zu handeln“ als `[data-hidden="true"]`{: .language-css style="white-space: nowrap"}? Weil es für ersteres die Kurzschreibweise `.hidden`{: .language-css style="white-space: nowrap"} gibt? Klassen sind nicht Mittel der Wahl, wenn es bessere Attribute gibt. Womit nicht `data-…` gemeint ist; schon eher `aria-hidden`. Aber auch das ist nicht Mittel der Wahl, wenn es ein besseres Attribut gibt: `hidden`. Natives HTML. _“Documents that use `style` attributes on any of their elements must still be comprehensible and usable if those attributes were removed. **Note:** In particular, using the `style` attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the `hidden` attribute.)”_{: lang="en"} [[Spec](http://w3c.github.io/html/dom.html#the-style-attribute)] In JavaScript einfacher zu handeln als alles andere: `<HTMLElement>.hidden = true;`{: .language-js style="white-space: nowrap"} bzw. `<HTMLElement>.hidden = false;`{: .language-js style="white-space: nowrap"}. [Für alte IEs](http://caniuse.com/#feat=hidden) kann man noch `[hidden] { display: none }`{: .language-css style="white-space: nowrap"} ins Stylesheet schreiben – gegebenfalls auch mit `!important`. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@Camping_RIDER > Nur als Ergänzung... Die einer weiteren bedarf. > > Ja, indem du beim Klick auf den Button die [display-Eigenschaft](https://wiki.selfhtml.org/wiki/Display#none:_Keine_Box) per [Javascript (style-Eigenschaft)](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/element/style) änderst, alternativ kannst du die Klasse ändern und damit `display:none;` bzw. `display:block;` setzten. > > Im Allgemeinen ist Letzteres besonders empfehlenswert, da bei der ersten Variante (direktes Ändern per JavaScript) Probleme auftauchen können - so ist es bspw. in den meisten Browsern nicht ohne weiteres möglich, eine solche direkte Änderung wieder rückgängig zu machen Nein? Doch. Oh! `….style.display = '';`{: .language-js style="white-space: nowrap"} sollte Änderungen durch JavaScript rückgängig machen und `display` auf den im Stylesheet (das kann auch das Browserstyleet sein) angegebenen Wert zurücksetzen. Und zwar in den meisten (lies: allen?) Browsern. > Die Klassen-Lösung ist da **deutlich** flexibler, **plus** separation of concerns Die Angabe, **wie** etwas dargestellt wird, gehört unzweifelhaft ins Stylesheet. Darum geht’s hier aber nicht; sondern darum, **ob** etwas dargestellt wird. Und das darf sich durchaus im Markup/DOM wiederspiegeln. _Separation of concerns_{: lang="en"} ist hier nicht _per se_ ein Grund gegen Inline-`style`-Attribute. > Statt Klassen **könnten** (falls angebracht) auch [data-\*](http://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/data-*)-Attribute eingesetzt werden, Was für _Daten_ sollten da drinstehen? `data-hidden="true"`?? > Klassen sind aber im Allgemeinen einfacher zu handeln. Inwiefern wäre `[class~="hidden"]`{: .language-css style="white-space: nowrap"} „einfacher zu handeln“ als `[data-hidden="true"]`{: .language-css style="white-space: nowrap"}? Weil es für ersteres die Kurzschreibweise `.hidden`{: .language-css style="white-space: nowrap"} gibt? Klassen sind nicht Mittel der Wahl, wenn es bessere Attribute gibt. Womit nicht `data-…` gemeint ist; schon eher `aria-hidden`. Aber auch das ist nicht Mittel der Wahl, wenn es ein besseres Attribut gibt: `hidden`. Natives HTML. _“Documents that use `style` attributes on any of their elements must still be comprehensible and usable if those attributes were removed. **Note:** In particular, using the `style` attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the `hidden` attribute.)”_{: lang="en"} [[Spec](http://w3c.github.io/html/dom.html#the-style-attribute)] In JavaScript einfacher zu handeln als alles andere: `….hidden = true;`{: .language-js style="white-space: nowrap"} bzw. `….hidden = false;`{: .language-js style="white-space: nowrap"}. [Für alte IEs](http://caniuse.com/#feat=hidden) kann man noch `[hidden] { display: none }`{: .language-css style="white-space: nowrap"} ins Stylesheet schreiben – gegebenfalls auch mit `!important`. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)