Texte Ein-/Ausblenden - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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
  • Feedbacks zu ""

    Keine Kommentare gefunden.

    Bitte Dein Feedback

    Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
    Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

    Login | Registrierung


              CAPTCHA
              Vielen Dank für Dein Feedback.
              Logo Host Europe
              Button Spenden

              © 2009 - 2020




              
              Besucher Statistik
              » 2 Online
              » 8 Heute
              » 119 Gestern
              » 537 Woche
              » 901 Monat
              » 42115 Jahr
              » 266321 Gesamt
              Record: 1144 (01.02.2020)
              Gesamt Downloads:
              Hosting by
              Zurück zum Seiteninhalt