Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Bereiche in Webseiten auf- und zuklappen

Seit 2009 verwende ich meine JavaScript-Technik "klappen", wenn bestimmte Bereiche auf Webseiten erst nach einem Klick angezeigt werden sollen. Prominentestes Beispiel: Die "Hinweise für bessere Suchergebnisse" in meinem Suchscript.

Nach 8 Jahren ist es an der Zeit, diese Technik zu modernisieren. Auch weil es heute hübscher geht. Man klappt heute animiert, d. h. die entsprechenden Bereiche werden nicht einfach ein- und ausgeschaltet, sondern langsam auf- bzw. zugezogen. jQuery macht es (einfach) möglich.

Selbstverständlich erzeugt die vorgestellte Technik valides HTML und CSS, sowie barrierefreie und responsive Seiten.

Demo

Die Demo ist bewusst als .html geschrieben, als Beleg dafür, dass keinerlei serverseitige Technik zum Einsatz kommt.
Ebenso ist sowohl CSS als auch JavaScript in der Demo inline realisiert. Beides zusammen macht es einfach, die komplette, funktionsfähige Seite als Vorlage für eventuelle eigene Experimente zu speichern.

Beschreibung

Im HTML (Markup) müssen lediglich die zu klappenden Bereiche mit der Klasse "toklapp" versehen werden.

Das Markup - hier als Beispiel eine verschachtelte Liste

<ol> <li>ein Listenpunkt</li> <li>Jetzt mit Submenü <ol class="toklapp"> <li>ein Sublistenpunkt</li> <li>der zweite Sublistenpunkt <ol class="toklapp"> <li>foo</li> <li>bar</li> </ol> </li> </ol> </li> <li>und der letzte Listenpunkt</li> </ol>

Etwas mehr Markup ist erforderlich, wenn Nicht-Listen-Elemente klappen sollen. Dann muss vor den zu klappenden Bereich ein Absatz eingefügt werden, der den zu klappenden Bereich benennt, in folgender Form

<p class="klappname" >Bereich</p>

Eventuell ist davor noch eine weitere Codezeile erforderlich, um einen Zeilenumbruch zu erzwingen:

<p class="trenner"></p>

Am Beispiel eines divs sieht der komplette Code dann folgendermaßen aus:

<p class="trenner"></p> <p class="klappname" >Bereich</p> <div class="toklapp"> <p>Lorem ipsum … </p> </div>

JavaScript und CSS erledigen den Rest:

Das JavaScript

// zuerst die "Klapp-Links" schreiben:   $( document ).ready(function() {   var e2 = document.getElementsByClassName('toklapp'); for (var m = 0; m < e2.length; m++) {   // jedem Node eine id zuweisen: var att = document.createAttribute("id"); att.nodeValue = "kl_"+m; e2[m].setAttributeNode(att); }   var k = 0; var numItems = $('.toklapp').length; for (k=0;k<numItems;k++) { $( '<a id="klapp'+ k +'" href="javascript:void(0);" onclick="toggleHandler('+ k +');" ><span aria-hidden="true">[+]</span>&nbsp;<span>anzeigen</span></a>' ).insertBefore( "#kl_" + k ); } });     // jetzt Auf- und Zuklappen:   function toggleHandler(i) { $("#klapp" +i).fadeTo(400,0);   if ( $( "#kl_" + i ).is( ":hidden" ) ) { $( "#kl_" + i ).slideDown(function(){; $("#klapp" +i).html('<span aria-hidden="true">[&minus;]</span>&nbsp;<span aria-live="polite" >verbergen</span>'); $("#klapp" +i).fadeTo(400,1); }); } else if ( $( "#kl_" + i ).is( ":visible" ) ) { $( "#kl_" + i).slideUp(function(){; $("#klapp" +i).html('<span aria-hidden="true">[+]</span>&nbsp;<span aria-live="polite" >anzeigen</span>'); $("#klapp" +i).fadeTo(400,1); }); } }

Das CSS

.klappname {display:inline-block;} .trenner {margin:0;} .toklapp {display:none;} [id^="kl_"] p {border:1px solid;padding:.5em;background:#eee;} [id^="klapp"] {text-decoration:none;} [id^="klapp"] span:nth-of-type(2) {text-decoration:underline;}

Bemerkungen

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.