Xpages: Bootstrap accordion controls not working correctly - twitter-bootstrap-3

Question

Trying to build a reusable menu custom control with a bootstrap theme. I would like an accordion layout, that looks like so:
In a true accordion when a user selects a different heading then the previously selected heading "rolls up". Mine is not rolling up. I suppose this is not a huge problem, but am concerned that if this is not working, then something else will not work either.
I am wondering if it would be better to use the dojo accordion in Xpages in this instance?
Custom Control code (ccMenuFinal)
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<style>
.list-group{margin-bottom:0}
</style>
<xp:div styleClass="panel-group" id="accordion">
<xp:repeat id="repeat1" var="entry" indexVar="index"
value="#{javascript:compositeData.mnuHeading}">
<xp:div styleClass="panel panel-default">
<xp:div styleClass="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-parent="#accordion"
href="#{javascript:'#' + entry.MenuHeadingName}">
<xp:text escape="true" id="computedField1"
value="#{javascript:entry.MenuHeadingName}" />
</a>
</h4>
</xp:div>
<div id="#{javascript:entry.MenuHeadingName}"
class="panel-collapse collapse">
<ul class="list-group">
<xp:repeat id="repeat2" var="entry2"
indexVar="index2" value="#{javascript:entry.mnuTitle}">
<xp:link id="lnk"
value="#{javascript://entry2.mnuTrg}">
<xp:this.styleClass><![CDATA[#{javascript:if (entry2.mnuTrg == context.getUrl().getSiteRelativeAddress(context))
{"list-group-item active"}
else
{"list-group-item"}}]]></xp:this.styleClass>
<xp:image id="image3"
style="padding-right:10.0px"
url="#{javascript:entry2.mnuTtlIcn}">
</xp:image>
<xp:this.text><![CDATA[#{javascript:entry2.mnuNme}]]></xp:this.text>
</xp:link>
</xp:repeat>
</ul>
</div>
</xp:div>
</xp:repeat>
</xp:div>
</xp:view>
Xpage code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<div class="container">
<xc:ccMenuFinal>
<xc:this.mnuHeading>
<xc:mnuHeading MenuHeadingName="PCs">
<xc:this.mnuTitle>
<xc:mnuTitle mnuTrg="/xpView01.xsp"
mnuNme="Inventory"
mnuTtlIcn="/inventory16X16blue.png"
mnuTtlIcnAct="/inventory16X16.png">
</xc:mnuTitle>
<xc:mnuTitle mnuNme="Being Built"
mnuTrg="/xpView02.xsp"
mnuTtlIcn="/build16X16blue.png"
mnuTtlIcnAct="/build16X16.png">
</xc:mnuTitle>
</xc:this.mnuTitle>
</xc:mnuHeading>
<xc:mnuHeading MenuHeadingName="Tasks">
<xc:this.mnuTitle>
<xc:mnuTitle mnuNme="Build Tasks"
mnuTrg="/xpViewTasksBuild.xsp">
</xc:mnuTitle>
</xc:this.mnuTitle>
</xc:mnuHeading>
</xc:this.mnuHeading>
</xc:ccMenuFinal>
</div>
</xp:view>

Answer 1

There are 2 issues with the code you posted.
The first is your <xp:div styleClass="panel-group" id="accordion">
Because it's an XP tag, the id accordion gets converted into a programmatic id that consists of prefixes...e.g. view:0:whatever:accordion. This is breaking your tabs and not allowing them to link to the panel group. Change this to <div class="panel-group" id="accordion">
The second is the repeat control that is used to generate the tabs. As a default, a repeat control creates its own divs. This is creating alien HTML tags inside your accordion HTML. There is a property for the repeat control called disableOutputTag. Set this to true and it will remove the alien HTML.