Gunnar Bittersmann: Längeren Text anhängen

Beitrag lesen

SELF-Forum

Längeren Text anhängen

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@wh!te:

nuqneH

Hallo,
ich bin absoluter Javascript Neuling und grad erst am lernen. Dabei bin ich auf folgendes Problem gestoßen: Ich möchte auf einer Seite einen Link einfügen, mit dem man den bestehenden Text erweitern kann, also praktisch nur ein Teil des Textes da steht (in meinem Beispiel der erste Absatz) und bei Klick auf den Button/Link die restlichen Absätze hinzugefügt werden.

Mit JavaScript? Das ist keine gute Idee. Besucher ohne JavaScript (und das sind nicht nur menschliche) bekommen nicht den ganzen Text zu sehen.

Besser ist es, den ganzen Text im HTML-Code zu haben und mit JavaScript auszublenden. Dazu dem 'body' per JavaScript eine Klasse "js" geben und im Stylesheet per Nachfahrenselektor ausblenden (also nur bei aktiviertem JavaScript). Durch Click auf den Button wird dem 'div'-Elternelement die Klasse "zeigeAlles" hinzugefügt und damit die ausgblendeten Absätze eingeblendet und der Button ausgeblendet:

<body>  
  <script type="text/javascript">[code lang=javascript]document.body.className += " js";
~~~</script>  
  <div class="angeteasert">  
    <p class="teaser">Dies ist der erste Absatz, der immer sichtbar ist.</p>  
    <p>Dies ist der zweite Absatz, der anfangs versteckt ist.</p>  
    <p>Dies ist der dritte Absatz, der anfangs versteckt ist.</p>  
    <button onclick="`this.parentNode.className += ' zeigeAlles';`{:.language-javascript}">Weiterlesen</button>  
  </div>  
</body>[/code]  
  
Im Stylesheet:  
  
~~~css
.js .angeteasert p { display: none }  
.js .angeteasert p.teaser { display: block }  
.js .angeteasert.zeigeAlles p { display: block }  
.js .angeteasert.zeigeAlles button { display: none }

Qapla'

--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
Beitrag melden
–
Informationen zu den Bewertungsregeln