Zum Inhalt springen

Bootstrap-Accordion ohne Extension

Erstellt am 18. November 2015 · 2 Antworten · letzte Antwort am 18. November 2015

Tags: Fluid, Bootstrap, Frage

LenaLenaLena ·

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!