Content-Bereiche auf-und zuklappen (javascript)

Ganze Inhaltspassagen mit einem Klick anzuzeigen und wieder auszublenden ist eine beliebte Methode, um z.B. Detailseiten zu vermeiden. Die folgende Lösung bedient sich eines kleinen JavaScripts, um dies zu bewerkstelligen. 

 

Achtung: Snippet funktioniert nur bei Browsern mit aktiviertem JavaScript!

Beispiel:

Text der immer angezeigt wird - Details/NoDetails - (klick auf Schaltfläche!)

HowToDo:

...im Head-Bereich oder (auf der Seite vor dem Popup-Element) folgendes Java-Script einsetzen:

 

<script type="text/javascript">
//<![CDATA[


/*Script für Aufklappbare Bereiche

-----------------------------------------*/
function show(id)
{
 if (document.getElementById(id).style.display=='none')
 {document.getElementById(id).style.display='block'; }
 else
 { document.getElementById(id).style.display='none'; }
}
//]]>
</script>

 

...als html-Code in einem Widget-Element einsetzen:

 

Text der immer angezeigt wird -

<a id="" style="" href="javascript:show('zeige')" name="">Details/NoDetails</a>

- (klick auf Schaltfläche!)

<div id="zeige" class="" style="display: none;">

<h3>PopUp-Textbox</h3>

<p>Dieser Text soll bei einem Klick auf die Schaltfläche als PopUp angezeigt werden und bei einem weiteren Klick wieder verschwinden...</p>

</div>

 

Tipp: Über id="" und class="" bzw. style="" können noch Formatierungen für das Popup-Element vorgenommen werden...




Nachtrag:

Wenn ein zweites Popup-Element auf der gleichen Seite eingebaut werden soll, darf nicht die gleiche Variable für javascript:show ('...') bzw. für den entsprechenden id-tag verwendet werden (z.B. "popup" statt "zeige" und für weitere Einträge "popup1", "popup2", usw...)!



Beispiel:

Text der immer angezeigt wird - Details einblenden/ausblenden



Code im html-Widget:

Text der immer angezeigt wird -

<a id="" style="" href="javascript:show('popup')" name="">

    Details einblenden/ausblenden</a>

 

<div id="popup" class="" style="display: none;">

<h3>PopUp-Textbox</h3>

<p>Dieser Text soll bei einem Klick auf die Schaltfläche als PopUp angezeigt werden und bei einem weiteren Klick wieder verschwinden...</p>

</div>