Artikel-Hilfsmenü
Donnerstag, 8. Juni 2017 – aktualisiert am Dienstag, 9. Oktober 2018
Bereiche in Webseiten auf- und zuklappen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
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.
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> <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">[−]</span> <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> <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
- Die Demo beinhaltet auch ein Hamburger-Menü (wenn der Viewport schmäler als 550 px ist). Die Technik dahinter wird in einem späteren Artikel beschrieben.
- Beim Nachbauen nicht vergessen: jQuery (beliebige Version) muss in die Seite eingebunden sein.
Nachtrag 09.10.2018
Muss man im Jahr 2018 noch User ohne / mit deaktiviertem JavaScript berücksichtigen? Meine Meinung: Wenn die Seite ohne JavaScript unbenutzbar ist, dann ja.
Im vorliegenden Fall ist das ganz einfach. Die (mit JavaScript) anzuzeigenden Bereiche werden ja erst einmal per CSS unsichtbar gemacht: .toklapp {display:none;}
Man muss also nur dafür sorgen, dass diese CSS-Anweisung mit .toklapp {display:block;} überschrieben wird, wenn JavaScript nicht verfügbar ist.
Also in den <head>-Bereich:
<noscript>
<style>.toklapp {display:block;}</style>
</noscript>
NB: Ja, in HTML5 ist <noscript> im <head> erlaubt.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
4 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Tobias schrieb am Donnerstag, 28.02.19 19:09 Uhr:
Super, vielen Dank!
Aber eine Frage habe ich:
Wie kann man die Position des Links/Buttons zum ein-/ausklappen kontrollieren über CSS? Vielen Dank im vorraus!
Roland Hartinger schrieb am Dienstag, 05.03.19 12:40 Uhr:
Hallo, sieht gut aus und sowas suche ich. Kann ich aber statt einen Text auch ein Foto zum Anklicken nehmen?
Antwort: Natürlich geht das auch mit einem passenden Foto.
T.Richter schrieb am Mittwoch, 04.09.19 10:21 Uhr:
Gibt es eine Möglichkeit, bereits im Link zu einem aufklappbaren Textfeld zu definieren, das das aufklappbare Textfeld bei Aufruf über diesen Link geöffnet dargestellt wird?
Der Einfachheit halber hier der gewünschte Link zum Textfeld, welcher das Textfeld bereits geöffnet darstellen soll, statt Quellcodeseqenz der Zielseite abzutippen:
https://schmalfilm-überspielen.de/Video,%20SD%20Karte,%20Hi8,%20miniDV,%20VHS%20digitalisieren.html#TBCVielen Dank für Ihre Antwort.
Tommy
Alex schrieb am Dienstag, 12.10.21 23:10 Uhr:
Vielleicht auch ganz interessant zu beachten:
https://www.axels-blog.de/bootstrap-mobile-menue-einklappen-bei-klick- auf-link/