Aufklappbares und zuklappbares div Element (jQuery)
Will man für den Nutzer erweiterte, zusätzliche Informationen beim Laden der Seite ausblenden und nur bei einer bestimmten Aktion bzw. Event einblenden, wie zum Beispiel durch einen Klick (on click) oder durch Drüberfahren (on mouse over) mit dem Mauszeiger, dann kann man dafür ein kleines Javascript nutzen. Per CSS wird das div Element nach dem Laden der Webseite vorerst unsichtbar gemacht, ist jedoch im HTML Quelltext enthalten. Sehr schön kann man dafür dann jQuery mit bereits vorhandenen Effekten wie dem Slide einsetzen.
Als erstes legen wir die div Elemente mit Text an: Wir haben 2 divs mit je einem kleinen Text. Der den erste Text soll sofort angezeigt werden. Der zweite soll für den Nutzer auf der Seite erst eingeblendet werden, wenn mit der Maus auf einen Button bzw. in unserem kleinen Beispiel einen Link geklickt wird. Dafür haben wir folgenden HTML Code als Beispiel:
|
1 2 3 4 5 6 7 8 9 10 11 |
... <div> Erster Text, der immer sichtbar ist. Er erscheint beim Laden der Webseite. </div> <p><a href="#" class="show">Text bzw. div aufklappen</a></p> <div style="display: none;" class="hidden"> Zweiter Absatz des Textes. Der Text / das Div ist zugeklappt bzw. nicht sichtbar, da es durch die CSS Eigenschaft display: none; nicht angezeigt wird. </div> ... |
Zu sehen beim Betreten der Website sind der obere Text sowie der darunterliegende Link „Text bzw. div aufklappen“. Das Aufklappen und Zuklappen der div-Box erreichen wir mit einem kleinen, aber feinen Javascript, genauer gesagt jQuery-Script.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function() { $('.show').click(function() { $('.hidden').slideToggle(); $(this).text($(this).text() == 'Text bzw. div aufklappen' ? 'Information wieder einklappen' : 'Text bzw. div aufklappen'); }); }); </script> |
Für das Aufklappen nutze ich in diesem Tutorial die Funktion slideToggle. Diese klappt je nach Zustand des Elements, das div mit einem Slide auf oder wieder zu. Der Zustand, ob sichtbar oder unsichtbar, wird in der Funktion intern zuvor abgefragt. Ein Schritt, der uns vom jQuery Framework in diesem Fall abgenommen wird.
Ein weiteres zusätzliches Feature, dass zur Usability beiträgt ist in diesem Beispiel die Änderung des Linktextes. Wenn die Box aufgeklappt ist, macht es durchaus Sinn den Linktext in „Information wieder einklappen“ umzuschreiben. Der Text vermittelt dem Nutzer sofort, dass bei einem erneuten Klick der Text wieder verschwinden wird.
Das erste div wird angezeigt. der link zum Aufklappen auch, aber der Text wird bei click nicht sichtbar. Was kann das sein? Ich habe es genau so eingebaut.
Bitte poste deinen kompletten Code wie du ihn eingebaut hast. Man kann ohne diesen nur schwer helfen.
Hallo! erstmal danke für den Code, funktionerit wunderbar!
Ist es aber möglich, den Toggle von links nach rechts anstatt von oben nach unten einzustellen?
Danke & Schöne Grüße,
Martin