Texte Ein-/Ausblenden - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Texte Ein-/Ausblenden

Scripte > Text- & Tabellenobjekte

Lange Texte ein- und wieder ausblenden

Zu lange Texte, Auflistungen oder andere Objekte?
Mit Javascript können langen Textpassagen und andere Elemente einfach aus- und wieder einblendet werden.
So kann man auch Imageobjekte oder weitere Ablaufinformationen aufgelistet anzeigen lassen.
Beispiel 2 unten zeigt auch dazu eine alternative Anwendung.
Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Skript auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Änderungen nur in einer Datei durchführen zu müssen.
Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>....</head> und HTML-Code in den BODY-Bereich <body>....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber durch einen Doppelklick ausgeführt werden.
Download Button
x runter geladen
Ausgabe:
  • Hänsel und Gretel
  • Dornröschen
  • Rotkäppchen
  • Code für den <HEAD> Bereich
    <script src="wsX5Obj/Obj167_0/fade.js"></script>
    Code für den <BODY> Bereich
    <?php include "wsX5Obj/Obj167_0/fade_inc.html"; ?>

    Alternative Einbindung:
    <div id="ebenen">
    <li>
    <a href="#ebene2" onclick="Obj167_in('ebene2'); return false;">Hänsel und Gretel</a>
    </li>
    <p id="ebene2" style="display:none;">
    Vor einem großen Walde wohnte ein armer Holzhacker mit seiner Frau und seinen zwei Kindern; das Bübchen hieß Hänsel und das Mädchen Gretel.  Er hatte wenig zu beißen und zu brechen, und einmal, als große Teuerung ins Land kam, konnte er auch das täglich Brot nicht mehr schaffen. .....
    </p>
    <li>
    <a href="#ebene3" onclick="Obj167_in('ebene3'); return false;">Dornröschen</a>
    </li>
    <p id="ebene3" style="display:none;">
    Vor Zeiten war ein König und eine Königin, die sprachen jeden Tag 'ach, wenn wir doch ein Kind hätten!' und bekamen  immer keins. Da trug sich zu, als die Königin einmal im Bade saß, daß ein Frosch aus dem Wasser ans Land kroch und zu ihr sprach, 'dein Wunsch wird erfüllt werden, ehe ein Jahr vergeht, wirst du eine Tochter zur Welt bringen.' .....      
    </p>
    <li>
    <a href="#ebene4" onclick="Obj167_in('ebene4'); return false;">Rotkäppchen</a>
    </li>
    <p id="ebene4" style="display:none;">
    Es war einmal eine kleine süße Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Samt, und weil ihm das so wohl stand, und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen. .....
    </p>
    </div>
    Code Datei "fade.js"
    function Obj167_out() {
    var elemente = document.getElementById
    ("ebenen").getElementsByTagName("p");
    for (var i = 0; i < elemente.length; i++) {
    elemente[i].style.display = "none";
    }
    }
    function Obj167_in(div) {
    Obj167_out()
    document.getElementById(div).style.display = "inline";
    }
    Beispiel 2:
  • Das ist der HTML-Code für Beispiel 2

  • » nach oben «
    Logo Host Europe
    Button Spenden
    🏠 © 2009 - 2024
    Hosting by
    Zurück zum Seiteninhalt