Texte Ein-/Ausblenden - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Texte Ein-/Ausblenden

Scripte > Text- & Tabellenobjekte

Texte ein- und wieder ausblenden.

Zu lange Texte?
Mit Javascript können langen Textpassagen einfach aus- und einblendet werden.
Beispiel 2 unten zeigt auch eine alternative Anwendung.

HTML-Code kopieren und in den BODY Bereich der ausführenden Seite an gewünschter Stelle einfügen.
Erfahrene Nutzer können den Javascript-Code (js) in einer separaten js-Datei hintelegen und per Linkaufruf im HEAD-Bereich einbinden.
Download Button
  • Hänsel und Gretel
  • Dornröschen
  • Rotkäppchen
  • Ausgabe:

    Code für den <HEAD> Bereich
    <script language="JavaScript" type="text/javascript">
    <!--
    function alleAusblenden(){
    var elemente = document.getElementById

    ("ebenen").getElementsByTagName("p");
        for (var i = 0; i < elemente.length; i++) {
        elemente[i].style.display = "none";
        }
      }
    function einblenden(div){
        alleAusblenden()
        document.getElementById(div).style.display =
    "inline";
      }
    //-->
    </script>
    Code für den <BODY> Bereich
    <!-- Nutzer von Website X5 sollten die automatische Höhe im HTML-Objekt aktivieren! -->
    <div id="ebenen">
    <li><a href="#ebene2" onclick="einblenden('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="einblenden('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="einblenden('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>

    Beispiel 2:

    Das ist der HTML-Code für Beispiel 2
    Feedbacks zu ""

    es gibt insgesamt 0 Kommentar(e)



    Name*
    Vorname
    Kommentar*
    Email *
    Homepage
    Telefon
    Sicherheitscode *
     
    Logo HTML5
    Button Spenden

    © 2009 - 2018




      Besucher Statistik
     » 9 Online
     » 107 Heute
     » 1059 Woche
     » 3839 Monat
     » 41529 Jahr
     » 288107 Gesamt
    Rekord: 1420 (10.04.2014)
    Zurück zum Seiteninhalt | Zurück zum Hauptmenü