---
title: "Bootstrap-Accordion ohne Extension"
url: "https://www.typo3.net/d/121312-bootstrap-accordion-ohne-extension"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Bootstrap","Fluid","Frage"]
created: "2015-11-18"
last_reply: "2015-11-18"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Bootstrap-Accordion ohne Extension

TYPO3 › TypoScript · 2 Antworten · gestartet 2015-11-18

## Eröffnungsbeitrag

**LenaLenaLena** · 2015-11-18 · [Beitrag #1](https://www.typo3.net/d/121312-bootstrap-accordion-ohne-extension/1)

Hallo Leute,
ich habe im Internet ein (eigentlich) tolles Tutorial gefunden, um die Bootstrap Accordions ohne Extension umsetzen zu können. <http://www.ambranet.de/blogpost/cms/typo3/bootstrap-akkordeon-fuer-typo3.html> Nur leider zeigt er es bei mir nicht richtig an #angry#

**Mein Partial wird richtig übernommen:**
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <f:cObject typoscriptObjectPath="lib.accordion-1"/>
    </div>
    <div class="panel panel-default">
      <f:cObject typoscriptObjectPath="lib.accordion-2"/>
    </div>
    [...]
</div>
<script>
  $('#accordion')
    .on('show.bs.collapse', function(e) {
      $(e.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function(e) {
      $(e.target).prev('.panel-heading').removeClass('active');
    });
</script>

**Auf der ROOT-Seite habe ich dies im Seiten-TS-Konfig stehen:**
TCEFORM.tt_content.section_frame {
  addItems.100 = Akkordeon
}

**Mein TS sieht folgendermaßen aus:**
lib.accordion-1 = CONTENT
lib.accordion-1 {
 table = tt_content
 select {
   where = colPos = 25
   orderBy = sorting
   languageField = sys_language_uid
 }
}

lib.accordion-2 = CONTENT
lib.accordion-2 {
 table = tt_content
 select {
   where = colPos = 26
   orderBy = sorting
   languageField = sys_language_uid
 }
}

[...]

lib.stdheader.stdWrap.outerWrap.cObject = CASE
lib.stdheader.stdWrap.outerWrap.cObject {
 key.field = section_frame
 100 = TEXT
 100.value = |
 100.stdWrap.dataWrap = <div class="panel-heading panel-title"><div data-toggle="collapse" data-parent="#accordion" href="#acc-{cObj:parentRecordNumber}">|</div></div>
}

tt_content.textpic.20.stdWrap.outerWrap.cObject = CASE
tt_content.textpic.20.stdWrap.outerWrap.cObject {
 key.field = section_frame
 100 = TEXT
 100.value = |
 100.stdWrap.dataWrap = <div id="acc-{cObj:parentRecordNumber}" class="panel-collapse collapse panel-body"> | </div>
}

Wenn ich die Seite mit Firebug untersuche, übernimmt er den *lib.stdheader.stdWrap.outerWrap.cObject = CASE* und zeigt ihn richtig an. Nur den *tt_content.textpic.20.stdWrap.outerWrap.cObject = CASE* übernimmt er NICHT. Wennn ich dann die Klasse *csc-textpic-text* über Firebug ändere, funktioniert mein Accordion.

Weiß jemand auf die Schnelle, wieso er die 2. Klasse nicht übernimmt?
Ich hab es ja theoretisch einfach nur kopiert und die Klassen angepasst :(

Vielen Dank schonmal an alle!

## Antworten

### [#2](https://www.typo3.net/d/121312-bootstrap-accordion-ohne-extension/2) · LenaLenaLena · 2015-11-18

Sorr wegen dem mehrfachen Post, anscheinend hat er bei mir einen Fehler angezeigt, die Frage aber trotzdem abgeschickt :o:(

### [#3](https://www.typo3.net/d/121312-bootstrap-accordion-ohne-extension/3) · LenaLenaLena · 2015-11-18

Sorry wegen dem mehrfachen Post, anscheinend hat er bei mir einen Fehler angezeigt, die Frage aber trotzdem abgeschickt :o:(

---

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