Joomla Development – Bootstrap – Collapse – individuelle Einstellung

Ich programmiere grade in Joomla 3.0.2 und hier beschäftige ich mich auch mit Bootstrap das in der Version 2.3.2 integriert ist. Nachfolgend eine kleine Randnotiz die die JavaScript Funktion Collapse betrifft. Nimmt man das Beispiel von Bootsrap Javascript-Collapse , dann ist das erste Feld nach dem Erstaufruf ausgeklappt während das zweite geschlossen ist. Möchte mann nun dass alle oder bestimmt ein- oder ausgeklappt sind, dann muss man nur folgendes ändern.

Das Beispiel der Übersicht wegen von Bootstrap:

<ol>
	<li><div class="accordion" id="accordion2"></li>
	<li><div class="accordion-group"></li>
	<li><div class="accordion-heading"></li>
	<li><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"></li>
	<li>Collapsible Group Item #1</li>
	<li></a></li>
	<li></div></li>
	<li><strong><div id="collapseOne" class="accordion-body collapse in"></strong></li>
	<li><div class="accordion-inner"></li>
	<li>Anim pariatur cliche...</li>
	<li></div></li>
	<li></div></li>
	<li></div></li>
	<li><div class="accordion-group"></li>
	<li><div class="accordion-heading"></li>
	<li><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"></li>
	<li>Collapsible Group Item #2</li>
	<li></a></li>
	<li></div></li>
	<li><strong><div id="collapseTwo" class="accordion-body collapse"></strong></li>
	<li><div class="accordion-inner"></li>
	<li>Anim pariatur cliche...</li>
	<li></div></li>
	<li></div></li>
	<li></div></li>
	<li></div></li>
	<li>...</li>
</ol>

Die entscheidenden Zielen habe ich fett hervorgehoben. Für uns bedeutet dies, dass je nach gewolltem Zustand folgendes als Klasse einzutragen ist:

“accordion-body collapse in” = bedeutet ausgeklappt
“accordion-body collapse” = bedeutet eingeklappt

Möchte man somit nun dass alle eingeklappt sind nimmt man für alle als Klasse “accordion-body collapse”.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.