Zum Inhalt springen

Accordion mit Bootstrap 3.0

Erstellt am 30. Juni 2014 · 1 Antwort · letzte Antwort am 30. Juni 2014

Tags: Frage

andy-man ·

Hallo,
habe über TS - (Gridelement 3.0 Dev) ein Accordion definiert das fünf Einträge zulässt.
Es funktioniert nur dass der Body-Container sich nicht automatisch schliesst, wenn ein anderer Tab aktiviert wird.
Die Classe "panel-collapse collapse in" wir nicht geändert in "panel-collapse collapse". Liegt das am TS oder muss dies in der Javadatei bootstrap.js definiert werden?

Hier mal das TS

tt_content.gridelements_pi1.20.10.setup {
	# ID of gridelement
	1 < lib.gridelements.defaultGridSetup
	1 {
		dataWrap = <div class="panel-group-{field:uid}" id="accordion" >|</div>
		columns {
			# colPos ID
			1 < .default
			1 {
				prepend = TEXT
				prepend {
					field = flexform_headline1
					dataWrap = <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-{field:uid}" href="#collapse-c{field:uid}-1">|</a></h4></div><div id="collapse-c{field:uid}-1" class="panel-collapse collapse in">
				}
				wrap (
						<div class="panel-body">
						|
						</div>
	</div>
</div>
				)

			}
			2 < .default
			2 {
				prepend = TEXT
				prepend {
					field = flexform_headline2
					dataWrap = <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-{field:uid}" href="#collapse-c{field:uid}-2">|</a></h4></div><div id="collapse-c{field:uid}-2" class="panel-collapse collapse">
				}
				wrap (
						<div class="panel-body">
						|
						</div>
	</div>
</div>
				)
			}
			
			3 < .default
			3 {
				prepend = TEXT
				prepend {
					field = flexform_headline3
					dataWrap = <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-{field:uid}" href="#collapse-c{field:uid}-3">|</a></h4></div><div id="collapse-c{field:uid}-3" class="panel-collapse collapse">
				}
				wrap (
						<div class="panel-body">
						|
						</div>
	</div>
</div>
				)
			}
   }
}

Wo kann ich da ansetzen?

Danke andy-man

andy-man · · Beste Antwort

Hallo,
habe den Fehler gefunden :-)
Beim dataWrap habe ich die uid in die classe gesetzt.

FALSCH:

dataWrap = <div class="panel-group-{field:uid}" id="accordion" >|</div>

RICHTIG:

dataWrap = <div class="panel-group}" id="accordion-{field:uid"} >|</div>

andy-man