>> Basteleien >> Website >> Text aufklappen
Mit diesem Code kann man Text mit einem Klick ausklappen und wieder verbergen. Und so sieht es dann aus:
Und so geht´s:
1. Folgender code im Head Bereich (->Einstellungen -> Head bearbeiten) einfügen und speichern (muss nur einmal gemacht werden!):
<script type="text/javascript">
//<![CDATA[
var whichIsOpen = 0;
function showText(index) {
if(whichIsOpen != 0) {
hideText(whichIsOpen);
}
document.getElementById('aufklappen' + index).style.display = 'none';
document.getElementById('text' + index).style.display = 'block';
document.getElementById('zuklappen' + index).style.display = 'block';
whichIsOpen=index;
}
function hideText(index) {
document.getElementById('aufklappen' + index).style.display = 'block';
document.getElementById('text' + index).style.display = 'none';
document.getElementById('zuklappen' + index).style.display = 'none';
whichIsOpen=0;
}
//]]>
</script>
2. "Widget" einfügen ("Inhalt Einfügen">"weitere Inhalte"> "Widget/HTML").Im HTML Editor folgender Code einfügen:
<p> Hier kommt der Text, der immer dargestellt wird</p>
<p> </p>
<p id="aufklappen1"><a href="javascript:showText(1);"> Aufklappen</a></p>
<p id="text1" style="display: none;">Hier kommt der Text, der ausgeklappt werden soll. Textumbrüche können mit <br> eingefügt werden. </p>
<p> </p>
<p id="zuklappen1" style="display: none;"><a href="javascript:hideText(1);">Zuklappen</a></p>
3. Text im HTML-Editor nach Bedarf bearbeiten!
4. Wenn mehrere aufklappbare Texte eingefügt werden sollen, werden einfach die Schritte 2. und 3. wiederholt. Zu beachten ist, dass jeweils neue Indexnummern vergeben werden müssen ("0" nicht benutzen!):
<p> Hier kommt der Text, der immer dargestellt wird</p>
<p> </p>
<p id="aufklappen2"><a href="javascript:showText(2);"> Aufklappen</a></p>
<p id="text2" style="display: none;">Hier kommt der Text, der ausgeklappt werden soll.Textumbrüche können mit <br> eingefügt werden.
</p>
<p> </p>
<p id="zuklappen2" style="display: none;"><a href="javascript:hideText(2);">Zuklappen</a></p>