Text aufklappen bzw. herausfahren mittels JavaScript - Online Marketing Solutions AG

Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

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

Hat dir dieser Beitrag gefallen?

Über den Autor

Blog
Unter „Blogredaktion“ werden Fachbeiträge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch dafür gerne hier zur Verfügung.

Hinterlasse einen Kommentar

  • Peter 01.11.2011, 20:25 Uhr

    Sind auch relative Angaben (z.B. in %) möglich mit dem Skript?

  • Arwin Barsekhian 04.11.2011, 16:24 Uhr

    Hallo Peter,

    nein, mit dem Script lassen sich nur feste Pixel Angaben machen.

    Kannst ja mal ausprobieren, anstatt heightClosed = ‚200px‘; einfach mal heightClosed = ‚20%‘; eintragen. Dürfte jedoch nicht funktionieren.

  • Nessa 27.12.2011, 12:36 Uhr

    Super Artikel!

  • Kati 11.01.2012, 7:42 Uhr

    stark !

  • cledi 21.03.2012, 13:28 Uhr

    hi,

    ist es möglich mehrere felder dieser art auf einer seite zu platzieren? habe es versucht, klappte aber nicht…

    sorry, es fragt ein script-dummie 😉

  • Arwin 26.03.2012, 10:31 Uhr

    Hallo Cledi,

    die aktuelle Funktion ist nur für ein Container pro Seite gedacht. Wenn du mehrere Container auf einer Seite nutzen möchtest, müsstest du die Funktion umschreiben / erweitern. Die andere Möglichkeit wäre noch, die komplette Funktion zu kopieren und die entsprecehnden IDs verändern, da aktuell alles über die ID gesteuert wird.

  • Bene 12.06.2012, 23:17 Uhr

    Kann man auch steuern, dass die Box, wenn sie geöffnet ist, automatisch so groß wie der Text ist? also der CSS-Wert „auto“?

    Danke für jede Antwort und schöne Grüße,
    Bene.

  • Arwin 20.06.2012, 17:15 Uhr

    Grüß Dich Bene,

    soweit ich weiß dürfte das nur mit absoluten Pixel Werten funktionieren. Mit auto dürfte das nicht funktionieren.

  • AdiOnline 24.07.2012, 15:55 Uhr

    Freut mich sowas hier mal zu sehen, schreibt mal was zum jQuery Framework (vor allem zum Mobile Framework)… Ich denke viele kennen dies noch nicht, es macht viel Spaß und erleichtert die Arbeit Mobile Apps damit entwickeln zu können.

  • Matthias 27.03.2013, 11:36 Uhr

    Ich habe gehört, dass mindestens 60 Prozent des Textes sichtbar sein müssen, gilt das nicht mehr?