nicht angemeldet
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>
Rolf B
Gunnar Bittersmann
Ryuno-Ki