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

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

Texte Ein-/Ausblenden

Scripte > Text- & Tabellenobjekte

Lange Texte ein- und wieder ausblenden

Zu lange Texte?
Mit Javascript können langen Textpassagen einfach aus- und wieder einblendet werden.
Beispiel 2 unten zeigt auch eine alternative Anwendung. So kann man auch Bilder oder weitere Informationen anzeigen lassen

ZIP-Datei entpacken und Code in die Bereiche der ausführenden Seite an entsprechender Stelle einfügen.
HTML-Code  in den in den BODY-Bereich <body>.....</body> und
HEAD-Code in den HEAD-Bereich <head>.....</head>
der ausführenden Seite an gewünschter Stelle einfügen.
Erfahrene Nutzer können den  Javascript-Code (JS-Code) in einer separaten js-Datei hintelegen und per  Linkaufruf im HEAD-Bereich einbinden: <script src="folder/file.js"></script>
Download Button
x runter geladen!
  • 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 ""


    Kein Kommentar
    Vielen Dank für Dein Feedback.
    Logo HTML5
    Button Spenden

    © 2009 - 2018




    
    Besucher Statistik
    » 1 Online
    » 441 Heute
    » 552 Gestern
    » 1502 Woche
    » 8734 Monat
    » 63277 Jahr
    » 309855 Gesamt
    Record: 1420 (10.04.2014)
    Zurück zum Seiteninhalt