Webdesign-Blog

29. Januar 2020

Aufklapptexte in Javascript mit multiplen CSS-Klassen

Seit längerem verwende ich bei meinen Projekten sogenannte „Aufklapptexte“, also Texte, die erst sichtbar sind, nachdem man ein Element (meist eine Überschrift) anklickt.

Meine bisherige Javascript-Lösung hatte aber einen Nachteil, sie funktionierte nur mittels eindeutiger IDs, welche den jeweiligen versteckten Texten zugewiesen werden und einzeln in CSS definiert werden musste. Eine viel elegantere Lösung wäre die Verwendung von multiplen CSS-Klassen, was bisher aber Schwierigkeiten hinsichtlich Javascript scheiterte. Nun fand ich nach einigen Lesen und Experimentieren eine Lösung, die ich hier vorstellen möchte.

Praxis

Einer der gewünschten Aufklapptexte sieht ungefähr so aus:

Dieser Text wird angezeigt, wenn die Überschrift angeklickt wurde

Stellen Sie sich nun vor, Sie möchten nicht nur einen, sondern vieleicht 20 dieser Aufklapptexte auf der Seite haben. So ähnlich wie auf meiner Seite Webdesign-FAQ. Statt „fold-01“, „fold-02“ einzeln in CSS zu definieren wäre es doch viel einfacher und übersichtlicher, die CSS-Klasse „fold“ einmal festzulegen und alle nachfolgenden Elemente durch eine zusätzliche Klasse „f01“, „f02“ etc. durchzunummerieren.

Denn das vereinfacht und verkürzt nicht nur den CSS-Code, es befreit uns auch von der Notwendigkeit, vorher genau wissen zu müssen, wieviele Aufklapptexte sich auf einer Seite befinden. Nachfolgend beschreibe ich den (leicht vereinfachten) HTML, CSS und Jascript-Code, der dafür notwendig ist.

 

HTML-Code

Legen wir los, der Sourcecode des obigen Aufklapptextes sieht so aus:

<h2 class="plus-link">
  <a href="#" onClick="dtoggle('fold f01'); return false;">
    Dies ist die Überschrift
  </a>
</h2>

<div class="fold f01">
  <p>Dieser Text wird angezeigt, wenn die Überschrift angeklickt wurde</p>
</div>

Der Heading-Tag <h2> der Klasse „plus-link“ mit einem darin befindlichen Link <a> fungiert hier als Schaltfläche, das nachfolgende <div> der Klasse „fold“ umschließt den Bereich, der erst nach Klick sichtbar wird. Wie oben beschrieben sind die einzelnen Aufklapptexte über eine CSS-Subklasse durchnummeriert, hier „f01“.

CSS

Jetzt definieren wir das Aussehen des <h2> mit dem darin befindlichen <a> über CSS:

h2.plus-link { padding:5px 0 5px 0; }
h2.plus-link > a,
h2.plus-link > a:visited { color:#000; border-bottom:none; font-size:20px; }
h2.plus-link > a:hover { color:#FF0000; border-bottom:2px solid #FF0000; }

Damit optisch sofort ersichtlich ist, dass es sich hierbei um keine normale, sondern eine anklickbare Überschrift handelt, setzen wir vor den Linktext ein auffälliges Plus-Symbol, welches aus dem Webfont „Font Awesome“ stammt.

h2.plus-link > a:before { font-family:'FontAwesome'; content:"\f0fe"; margin-right:5px; font-size:20px; }

Abschließend noch der CSS-Code für den eingeklappten Bereich; dieser soll durch einen Strich links sofort optisch als aufgeklappt erkennbar sein:

div.fold { display:none; border-left:3px solid #000; padding:5px 0 5px 22px; margin:0 0 20px 3px; }

Das „display:none;“ bewirkt hier, dass der Bereich zuerst nicht sichtbar ist. Den display-Status schalten wir später über Javascript von „none“ auf „block“ und zurück - immer dann, wenn der Benutzer auf die Überschrift klickt.

 

Javascript bzw. jQuery

Nun zur Javascript-Funktion, welche von HTML aus über onClick aufgerufen wird. Diese sieht so aus:

function dtoggle(classid) {
  if (document.getElementsByClassName(classid)) {
    var mydiv = document.getElementsByClassName(classid);
    mydiv.item(0).style.display =
      (mydiv.item(0).style.display=='block' ? 'none' : 'block');
  }
}

Die hier verwendete jQuery-Funktion getElementsByClassName() akzeptiert mit Leerzeichen getrennte multiple Klassen, also in unserem Falle die Angabe „fold f01“, welche den ersten Aufklapptext mit der Subklasse „f01“ adressiert. Über mydiv.item(0).style.display == 'block' ? 'none' : 'block' wird dann zwischen „block“ und „none“ hin und hergeschaltet („getoggelt“).

Vorsicht Falle!

Der Kniff an der Funktion ist das „mydiv.item(0)“, denn die jQuery-Funktion getElementsByClassName() liefert, im Gegensatz zur vorher verwendeten Funktion getElementById(), ein Array zurück.

Bei meinen ersten Versuchen erhielt ich immer wieder eine Fehlermeldung, als ich über die Variable „mydiv“ den display-Status des Elements ändern wollte. Später kam ich drauf: zwar ist mein Aufruf von getElementsByClassName() eindeutig und in der Rückgabe befindet sich nur ein Element, dennoch muss über die Notierung „mydiv.item(0)“ auf die erste Zelle des Arrays zugegriffen werden.

Ja ja, das klingt so herrlich banal und offensichtlich, aber manchmal sieht man den Wald vor lauter Bäumen nicht.