Create accordion menu with TypoScript - menu

Question

Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*
Since I nearly lost my mind and questioned my brain on the way to it, I am searching for a good solution.
Edit: moved solution to own answer and changed topic start to question

Answer 1

Perhaps you could use fluid for Menu rendering. Here are some examples:
https://github.com/TYPO3/TYPO3.CMS/tree/master/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Menu

Answer 2

Yesterday and today I had quite some fun figuring out how to create an accordion menu with bootstrap css and TypoScript in TYPO3 7.6.*
Since I nearly lost my mind and questioned my brain on the way to it, I want to share you my outcome and would like to get some improvement ideas.
I have a 2 level menu where the first level is only for grouping - not linked - and the second level contains the sub pages
This is the HTML container inside my template:
# HTML part, put into your template
<div class="panel-group" id="accordion">
<f:cObject typoscriptObjectPath="lib.menu2" />
</div>
And this is my TypoScript:
# TypoScript part
lib.menu2 = HMENU
lib.menu2 {
wrap = |
1 = TMENU
1.expAll = 1
1.NO = 1
1.NO.wrapItemAndSub = <div class="panel panel-default">| </table></div></div></div>
1.NO.doNotLinkIt = 1
1.NO.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">
1.IFSUB < .1.NO
1.IFSUB.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">
1.CURIFSUB < .1.NO
1.CURIFSUB.allStdWrap.dataWrap = <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse in"><div class="panel-body"><table class="table">
1.ACTIFSUB< .1.CURIFSUB
2 = TMENU
2.NO = 1
2.NO.linkWrap = <tr><td> | </td></tr>
}
I still a small clean up on my todolist, to remove the submenu stuff for NO where there is no submenu.
What do you think?

Answer 3

#firegate666, your solution was inspirational! I've modified to account for:
- subparts (note: also works with fluid, just change ###SUBPART### )
- user-generated full CSS styling (no panels)
- a (minimum) 3 level menu
HTML Template:
<!-- ###MENU### START -->
<!-- ###MENU### END -->
TYPOscript:
# declare the menu,
# wrap it in a list <ul>
# and then wrap all that in a container div (for post-processing menus like slicknav),
subparts.MENU = HMENU
subparts.MENU.wrap = <div id="menu"><ul> | </ul></div>
subparts.MENU {
# 1st level
1 = TMENU
1 {
expAll = 1
# enable the NOrmal state, wrap it in a <li>
NO = 1
NO.wrapItemAndSub = <li> | </li>
# IF item has a SUBmenu, then it's still like a NOrmal item, but more
# wrap it in Bootstrap accordion/collapse functionality
# then close it
IFSUB < .NO
IFSUB = 1
IFSUB.allStdWrap.dataWrap (
<a class="accordion-toggle collapsed" data-toggle="collapse" href="#collapse{field:uid}"> | </a>
<div id="collapse{field:uid}" class="collapse">
<ul>
)
IFSUB.wrapItemAndSub (
<li> | </li>
</ul>
</div>
)
IFSUB.doNotLinkIt = 1
}
# 2nd level sub-menu and 3rd level sub-sub-menu inherit all the properties of 1st level
2 < .1
3 < .1
# end subparts.MENU
}
...and (suggested) CSS:
.accordion-toggle:before {
content: "- ";
}
.accordion-toggle.collapsed:before {
content: "+ ";
}
I hope this addition to your code is helpful :-)