Div verstecken von Gunnar Bittersmann, 03.08.2025 00:33

SELF-Forum

Div verstecken

Gerhard 02.08.2025 14:50

html

– Informationen zu den Bewertungsregeln

Hi,

wie kann man einen Textteil (div oder p) verstecken und wenn man auf einen bestimmten link klickt, sichtbar machen?

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

– Informationen zu den Bewertungsregeln

Div verstecken
Rolf B 02.08.2025 15:12

html
– Informationen zu den Bewertungsregeln
Hallo Gerhard,

man müsste da wohl mit JavaScript auf den Klick reagieren und das hidden-Attribut am div umschalten. Und dem div ein aria-live-Attribut geben, damit ein Screenreader die Umschaltung auch vorträgt.

Wir hatten im Wiki vor längerem einen Verbergen-Mechanismus gebaut, der JavaScript verwendet. Damit bringen wir ab und zu mal Quizfragen in die Artikel. Ein details-Element zu verwenden wäre oftmals besser, aber Mediawiki unterstützt das nicht.

Reicht Dir vielleicht details/summary?

Rolf

--
sumpsi - posui - obstruxi
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

–
Informationen zu den Bewertungsregeln

Div verstecken

MrMurphy 02.08.2025 17:39

html

−1 Informationen zu den Bewertungsregeln

Ich hatte bereits vor längerer Zeit mal ein Beispiel erstellt. Informationen stehen im Quelltext.

Ich muss den Quelltext auf zwei Beiträge verteilen:


<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text Aus- und Einblenden CSS</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      @media all {
      * {
         /*box-sizing: border-box;*/
      }
      html {
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }
   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 150%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }
   /*Eigener Checkbox Hack (ech01)*/
   @media all {
      .ech01 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech01 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech01>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech01 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech01>div:nth-of-type(2) label {
         display: none;
      }
      .ech01 label:checked {
         background-color: red;
      }
      .ech01 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech01 section {
         display: none;
      }
      .ech01 #ech011:checked ~ section:nth-of-type(1),
      .ech01 #ech012:checked ~ section:nth-of-type(2),
      .ech01 #ech013:checked ~ section:nth-of-type(3),
      .ech01 #ech014:checked ~ section:nth-of-type(4),
      .ech01 #ech015:checked ~ section:nth-of-type(5),
      .ech01 #ech016:checked ~ section:nth-of-type(6),
      .ech01 #ech017:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech01>div:nth-of-type(1) {
         display: none;
      }
      .ech01 label {
      }
      .ech01>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Eigener Checkbox Hack (ech02)*/
   @media all {
      .ech02 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech02 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech02>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech02 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech02>div:nth-of-type(2) label {
         display: none;
      }
      .ech02 label:checked {
         background-color: red;
      }
      .ech02 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech02 section {
         display: none;
      }
      .ech02 #ech021:checked ~ section:nth-of-type(1),
      .ech02 #ech022:checked ~ section:nth-of-type(2),
      .ech02 #ech023:checked ~ section:nth-of-type(3),
      .ech02 #ech024:checked ~ section:nth-of-type(4),
      .ech02 #ech025:checked ~ section:nth-of-type(5),
      .ech02 #ech026:checked ~ section:nth-of-type(6),
      .ech02 #ech027:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech02>div:nth-of-type(1) {
         display: none;
      }
      .ech02 label {
      }
      .ech02>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Cards*/
   @media all {
      .cards {
         padding: 0 0.5rem 1rem 0.5rem;
         border: 2px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0 0 0;
         display: flex;
         flex-wrap: wrap;
      }
      .cards section {
         box-shadow: 5px 5px 5px silver;
         padding: 0 0.5rem 1rem 0.5rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 1rem 0.5rem 0 0.5rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(25% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 1200px) {
      .cards section {
         flex-basis: calc(33.33% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 900px) {
      .cards section {
         flex-basis: calc(50% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 650px) {
      .cards section {
         flex-basis: calc(100% - 1rem - 2px - 1rem);
      }
   }

   </style>
</head>

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

−1 Informationen zu den Bewertungsregeln

Div verstecken

MrMurphy 02.08.2025 17:40

html

−1 Informationen zu den Bewertungsregeln

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>

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

−1 Informationen zu den Bewertungsregeln

Div verstecken
Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors 03.08.2025 00:33

barrierefreiheit

ux
– Informationen zu den Bewertungsregeln
@@MrMurphy

Dass der Checkbox-Hack nicht funktioniert, sollte sich inzwischen herumgesprochen haben.

🖖 Live long and prosper

--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

–
Informationen zu den Bewertungsregeln

Div verstecken
Felix Riesterer Homepage des Autors 02.08.2025 19:38

html
+1 Informationen zu den Bewertungsregeln
Lieber MrMurphy,

Ich muss den Quelltext auf zwei Beiträge verteilen:

nein, musst Du nicht. Du kannst auf ein online-Beispiel verlinken. Deine Quelltext-Postings sind nur wenig hilfreich.

Liebe Grüße

Felix Riesterer
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

+1
Informationen zu den Bewertungsregeln

Div verstecken
Felix Riesterer Homepage des Autors 02.08.2025 19:44

html
– Informationen zu den Bewertungsregeln
Lieber Gerhard,

ein Link auf einer Website führt zu einem neuen Dokument, oder zumindest zu neuem Inhalt. Wenn Du einen Teil des Inhalts verstecken möchtest, solltest Du für so eine Funktionalität einen Button verwenden.

Ist vielleicht ein Details-Element für Deinen Anwendungsfall sinnvoll?
- Zusammenfassung für längere Artikel
- Flyout-Menü: Alternative mit <details>
Liebe Grüße

Felix Riesterer
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

–
Informationen zu den Bewertungsregeln
Div verstecken
Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors 03.08.2025 20:33

html
– Informationen zu den Bewertungsregeln
@@Gerhard

wie kann man einen Textteil (div oder p) verstecken und wenn man auf einen bestimmten link klickt, sichtbar machen?

Um die Frage nach dem Wie beantworten zu können, muss man das Was und Warum kennen.

Was sind das für Texte, die da initial versteckt werden sollen? Und warum sollen die initial versteckt und nicht gleich angezeigt werden?

🖖 Live long and prosper

--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

–
Informationen zu den Bewertungsregeln
Div verstecken
Ryuno-Ki Homepage des Autors 04.08.2025 13:54

html
– Informationen zu den Bewertungsregeln
Moin Gerhard,

Hi,

wie kann man einen Textteil (div oder p) verstecken und wenn man auf einen bestimmten link klickt, sichtbar machen?

Je nach Anforderung könnte :target vielleicht schon tun.

Gruß,

--
a.k.a. André
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Gerhard: Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken

Div verstecken