Blindtext von Seiteninhalt mit Javascript anzeigen und verstecken - von Webbausteine.de
Guckt Euch bitte alle Erklärungen bei Webbausteine.de an - ich habe hier die ersten drei Beispiele eingebaut. Im Prinzip werden alle Beispiele gleich eingebaut. Hier zunächst eine Teil-Ansicht von meiner Seite.
Wir Ihr erkennen könnt, habe ich mir zunächst zusätzliche Layoutbereiche aufgezogen und darin ganz normal meine Textfelder und mein Bilder platziert.
Das Skript mit der Funktion zum Ausklappen für den ersten Blindtext mit der Katze sieht so aus und gehört (wie alle Skripte) in die HTML des Layouts.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
... wobei die hier blau markierte <style> Anweisung einen Link simulieren soll, die Ihr natürlich beliebig anpassen könnt. Auf diese span Class “mehr” verweise ich später unten.
<style>
span.mehr {
color: Royalblue;
cursor: Pointer;
text-decoration: underline;
}
span.mehr:hover {
color: Crimson;
}
</style>
<script>
function mehr(ID) {
if (document.getElementById(ID).style.display=="none") {
document.getElementById(ID).style.display="block";
}
else {
document.getElementById(ID).style.display="none";
}
}
</script>
Unter meiner Überschrift (hier “Unsere Katze Alina”) habe ich ein Textfeld zur Anzeige meines Textes “Anzeigen/Verstecken” aufgezogen und diese Class dann in den HTML-Code Editor des Textfeldes kopiert - zu erkennen an dem kleinen “T”.
> Textfeld doppelklicken > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen
<span class="mehr" onClick="mehr('eins')">Anzeigen/Verstecken</span>
Nun markiert Ihr den Layoutbereich mit Eurem Inhalt und der ersten ID - hier <div id=”eins”> - die oben in der Funktion des Skripts definiert wurde und mittels der “onClick” Anweisung aufgerufen wird. Das style=”display: none;” ist eine CSS-Anweisung, die die gesamte Anzeige des Layoutbereichs unterdrückt.
Klickt also im Fenster “Layout-Bereich-Eigenschaften” auf den Button “HTML” und fügt dieses DIV vor dem Tag “vorher” ein:
<div id="eins" style="display: none;">
... und schließt das DIV nach dem Tag “nachher” wieder.
</div>
Bitte achtet bei jedem Layoutbereich darauf, das dieser immer eine eindeutige ID bekommt. Die ID darf sich nicht wiederholen.
Viel Spaß!
