Text aufklappen bzw. herausfahren mittels JavaScript

Auf ausführliche, beschreibende Texte sollte man auf seiner Webseite nicht verzichten. Gerade aus SEO Sicht sind Texte mit einer entsprechenden Density (Keyworddichte) zu empfehlen. Hierbei kann es auch mal vorkommen, dass einem der Text einfach zu lang ist, um ihn auf der Startseite oder einer der Unterseiten einzubinden.
Den Text jedoch in irgendeiner Form „unsichtbar“ oder kaum sichtbar einzubinden verstößt gegen die Richtlinien der Suchmaschinen ist daher absolut nicht empfehlenswert.

Aber natürlich gibt es für solche Fälle eine alternativ Lösung mittels JavaScript, womit ein Teil des Textes von Beginn an ausgeblendet wird. Erst nach einem Klick auf „Weiter lesen“ klappt der Text vollständig auf.

Was muss hierbei beachtet werden?

Es gibt diverse Möglichkeiten, wie man solch einen Container (Text Box) mittels JavaScript programmieren kann. Zwei bestimmte Punkte sollte man hierbei beachten:

Es ist wichtig, dass der entsprechende Text vollständig angezeigt wird, wenn der Nutzer / Besucher in seinem Browser JavaScript deaktiviert hat.

Des Weiteren sollte nicht der komplette Text ausgeblendet werden, sondern maximal zwei Drittel vom kompletten Text.

Die JavaScript Funktion

Ich habe eine kleine JavaScript Funktion mittels jQuery geschrieben, welche unten als ZIP zum Download angeboten wird. Mit dieser Funktion lassen sich unterschiedliche Höhenwerte für die entsprechenden Container angeben. Dabei müssen nur die Höhenwerte in der Switch Anweisung angepasst bzw. erweitert werden.

Beispiel für die Startseite

Unser Text auf der Startseite befindet sich in einem Container mit der ID Bezeichnung „wrapper“ und der passenden Klassenbezeichnung „wertStartseite“. Die Bezeichnung der ID muss „wrapper“ sein, die entsprechende Klassenbezeichnung kann dagegen beliebig angegeben werden. In der JavaScript Datei (script.js) befindet sich die besagte Switch Anweisung. Für jede Seite wird dort ein Case mit der entsprechenden Klassenbezeichnung und dem passenden Höhenwert angegeben. Die Variable „heightOpen“ beinhaltet die Gesamthöhe des Textes. Die Variable „heightClosed“ dagegen besagt, dass x Pixel sichtbar sein sollen. Wie folgt sehen die Case Angaben für unsere Beispielseite aus:

[php] case ‚wertStartseite‘: { heightOpen = ‚570px‘; heightClosed = ‚200px‘;}
break;
[/php]

Ein zweites Beispiel für die Unterseite

Nun möchten wir die gleiche Funktion auch auf einer Unterseite mit einem kleineren Text nutzen. Hierzu binden wir den gleichen Container auf die Unterseite ein. Geändert wird nur noch die Klassenbezeichnung (class=“wertLP01″). In der JavaScript Datei (script.js) erweitern wir die Switch Anweisung mit einem weiteren Case. Auch dort geben wir die Gesamthöhe (330px) sowie die Höhe des Teils, der immer Sichtbar sein soll (140px), an.

[php] case ‚wertLP01‘: { heightOpen = ‚330px‘; heightClosed = ‚140px‘;}
break;
[/php]

Sollte der Nutzer / Besucher JavaScript in seinem Browser deaktiviert haben, wird der komplette Text ausgegeben. Auch der „Weiter lesen…“ Button erscheint nur dann, wenn JavaScript aktiviert ist.

Fertige ZIP Datei herunterladen

Jetzt Downloaden

Verfasst von Arwin Barsekhian