Antwort an „MrMurphy“ verfassen

SELF-Forum

Div verstecken

MrMurphy

Der zweite Teil vom Quelltext:


<body>
   <header>
      <h1>Texte einblenden</h1>
   </header>
   <nav>
   </nav>
   <main>
      <h2>Weisheiten von Muhammad Ali</h2>
      <h2>Vorbemerkung</h2>
      <p>Ich selbst halte grundsätzlich nichts davon Texte zunächst zu verstecken. Das ist eine Barriere und damit benutzerunfreundlich. Außer beim Rätseln oder zum Lernen.</p>
      <p>Eine Einschränkung ist zum Beispiel, das die Seite nicht mit der Tastatur bedient werden kann.</p>
      <p>Als Alternative bevorzuge ich sogenannte cards (Karten). So kommt der Besucher nur durch Scrollen an alle Informationen, die dann auch nicht wieder verschwinden.</p>
      <p>Ob beim Laden der Webseite bereits eine Information geöffnet werden soll, und welche, kann im HTML-Quelltext über das Attribut checked bestimmt werden.</p>
      <p>Alle drei Möglichkeiten funktionieren gut bei den üblichen Bildschirm- und Fenstergrößen.</p>
      <p>02.08.2025: Der Quelltext ist bereits etwas älter. Aktuell würde ich statt Flexbox lieber CSS-Grid verwenden.</p>
      <h3>Lösung mit radio</h3>
      <p>Es kann nur eine Information gleichzeitig geöffnet sein:</p>
      <article class="ech01">
         <div>
            <label for="ech011">Montag</label>
            <label for="ech012">Dienstag</label>
            <label for="ech013">Mittwoch</label>
            <label for="ech014">Donnerstag</label>
            <label for="ech015">Freitag</label>
            <label for="ech016">Samstag</label>
            <label for="ech017">Sonntag</label>
         </div>
         <div>
            <input id="ech011" type="radio" name="ech01" checked>
            <input id="ech012" type="radio" name="ech01">
            <input id="ech013" type="radio" name="ech01">
            <input id="ech014" type="radio" name="ech01">
            <input id="ech015" type="radio" name="ech01">
            <input id="ech016" type="radio" name="ech01">
            <input id="ech017" type="radio" name="ech01">
            <label for="ech011">Montag</label>
            <section>
               <h3>Montag</h3>
               <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            </section>
            <label for="ech012">Dienstag</label>
            <section>
               <h3>Dienstag</h3>
               <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
            </section>
            <label for="ech013">Mittwoch</label>
            <section>
               <h3>Mittwoch</h3>
               <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            </section>
            <label for="ech014">Donnerstag</label>
            <section>
               <h3>Donnerstag</h3>
               <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
            </section>
            <label for="ech015">Freitag</label>
            <section>
               <h3>Freitag</h3>
               <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
            </section>
            <label for="ech016">Samstag</label>
            <section>
               <h3>Samstag</h3>
               <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
            </section>
            <label for="ech017">Sonntag</label>
            <section>
               <h3>Sonntag</h3>
               <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            </section>
         </div>
      </article>
      <h3>Lösung mit checkbox</h3>
      <p>Die Lösung gefällt mir gut zum Lernen. Was gewusst wurde bleibt offen. Was nicht gewußt wurde wird wieder geschlossen und kann in den Folgedurchgängen gezielt abgefragt werden.</p>
      <p>Die einzelnen Informationen können unabhängig voneinander geöffnet und geschlossen werden:</p>
      <article class="ech02">
         <div>
            <label for="ech021">Montag</label>
            <label for="ech022">Dienstag</label>
            <label for="ech023">Mittwoch</label>
            <label for="ech024">Donnerstag</label>
            <label for="ech025">Freitag</label>
            <label for="ech026">Samstag</label>
            <label for="ech027">Sonntag</label>
         </div>
         <div>
            <input id="ech021" type="checkbox" name="ech02" checked>
            <input id="ech022" type="checkbox" name="ech02">
            <input id="ech023" type="checkbox" name="ech02">
            <input id="ech024" type="checkbox" name="ech02">
            <input id="ech025" type="checkbox" name="ech02">
            <input id="ech026" type="checkbox" name="ech02">
            <input id="ech027" type="checkbox" name="ech02">
            <label for="ech021">Montag</label>
            <section>
               <h3>Montag</h3>
               <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            </section>
            <label for="ech022">Dienstag</label>
            <section>
               <h3>Dienstag</h3>
               <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
            </section>
            <label for="ech023">Mittwoch</label>
            <section>
               <h3>Mittwoch</h3>
               <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            </section>
            <label for="ech024">Donnerstag</label>
            <section>
               <h3>Donnerstag</h3>
               <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
            </section>
            <label for="ech025">Freitag</label>
            <section>
               <h3>Freitag</h3>
               <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
            </section>
            <label for="ech026">Samstag</label>
            <section>
               <h3>Samstag</h3>
               <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
            </section>
            <label for="ech027">Sonntag</label>
            <section>
               <h3>Sonntag</h3>
               <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            </section>
         </div>
      </article>
      <h3>Cards</h3>
      <article class="cards">
         <section>
            <h3>Montag</h3>
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
         </section>
         <section>
            <h3>Dienstag</h3>
            <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
         </section>
         <section>
            <h3>Mittwoch</h3>
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
         </section>
         <section>
            <h3>Donnerstag</h3>
            <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
         </section>
         <section>
            <h3>Freitag</h3>
            <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
         </section>
         <section>
            <h3>Samstag</h3>
            <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
         </section>
         <section>
            <h3>Sonntag</h3>
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
         </section>
      </article>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/aug/02/div-verstecken/1821210">https://forum.selfhtml.org/</a></p>
   </footer>
</body>

</html>
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen