---
title: "Accordion mit Bootstrap 3.0"
url: "https://www.typo3.net/d/118337-accordion-mit-bootstrap-30"
source: "typo3.net"
tags: ["Extensions","Bootstrap","Frage","Gridelements"]
created: "2014-06-30"
last_reply: "2014-06-30"
replies: 1
solved: true
page: 1
pages: 1
lang: "de"
---

# Accordion mit Bootstrap 3.0

Extensions · 1 Antwort · gelöst · gestartet 2014-06-30

## Frage

**andy-man** · 2014-06-30 · [Beitrag #1](https://www.typo3.net/d/118337-accordion-mit-bootstrap-30/1)

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

```typoscript
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

## Beste Antwort

**andy-man** · 2014-06-30 · [Beitrag #2](https://www.typo3.net/d/118337-accordion-mit-bootstrap-30/2)

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

FALSCH:

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

RICHTIG:

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

andy-man

## Antworten

### [#2](https://www.typo3.net/d/118337-accordion-mit-bootstrap-30/2) · andy-man · 2014-06-30 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

---

Quelle: „Accordion mit Bootstrap 3.0“, typo3.net, https://www.typo3.net/d/118337-accordion-mit-bootstrap-30
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.