Wiki „Element.classList.toggle“: Beispiel funktioniert teilweise falsch

[Rolf B]

Hallo Samuel,

das kann ich nicht nachvollziehen. Bei mir steht da initial "mehr".

Der Beispiel-Quellcode ist

  <main>
    <p id="tipp">Wollen Sie mehr lesen? Dann klicken Sie auf die Boxen.</p>
    <section id="aktuelles">
      <h2>Aktuelles</h2>
      <button id="button1">weniger …</button>
    </section>  
    <section id="ueber" class="hide">    
      <h2>Über uns</h2>
      <button id="button2">mehr …</button>
    </section>
    <aside id="links">
      <h2>Links</h2>
    </aside>  
  </main>

D.h. die initiale Beschriftung des Buttons in der "Über uns" Spalte ist "mehr...".

Ob es gut gelöst ist, den Buttontext per JS auszutauschen, ist aber eine andere Frage. Ich würde zwei Spans reinsetzen, mit "weniger" und "mehr" darin, und deren Sichtbarkeit über CSS umschalten, abhängig von der hide-Klasse. Dann hat man mit der Beschriftungssteuerung keine Arbeit mehr und hat den Buttontext auch nicht magisch im Script stehen.

Alternativ dazu könnte man die Beschriftungen über data-Attribute an den Button kleben. Aber ins Script gehören sie mMn nicht.

Mein Änderungsvorschlag zum Beispiel:

https://wiki.selfhtml.org/wiki/Beispiel:JS-classlist.toggle-v2.html

Anschauen - Ausprobieren

Rolf