Texte Ein-/Ausblenden - Website X5 Hilfe - Die 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?
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!

Ausgabe:

  • Hänsel und Gretel
  • Dornröschen
  • Rotkäppchen
  • 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.
    HTML5
    Button Spenden

    © 2009 - 2018




    
    Besucher Statistik
    » 2 Online
    » 162 Heute
    » 529 Gestern
    » 162 Woche
    » 7030 Monat
    » 76851 Jahr
    » 323429 Gesamt
    Record: 1420 (10.04.2014)
    Gesamt Downloads:
    Zurück zum Seiteninhalt