Using Bootstrap Accordion Panels - xpages

Question

Been struggling with jQuery syntax. I am trying to setup some JS code to expand/collapse an accordion panel (http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp). I can get it to expand and collapse with x$("#{id:collapsePanel2}").collapse("toggle"); That works fine but does not collapse the other panels. You can see this at https://www.netexperts.com/xpages1.nsf/collapse.xsp. There is a "parent" parameter which says it takes the selector. I have tried "#view:_id1:accordion" (the generated id of the parent panel), I have tried parent="#view:_id1:accordion" and a few other combinations. The docs at http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp under the .collapse options say the parent is a parameter that takes the parent selector but I can't seem to pass this in without throwing a JS error.
<?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">
<xe:navbar
id="navbar1"
headingText="Collapse Panel"
pageWidth="full">
</xe:navbar>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:panel
styleClass="panel-group"
id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<xp:link
escape="true"
id="link1">
Collapsible panel
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[
//function is called using x$("#{id:inputText1}", " parameters").
x$("#{id:collapsePanel}").collapse( "toggle");
function x$(idTag, param){ //Updated 18 Feb 2012
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
return($("#"+idTag));
}
]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</h4>
</div>
<xp:panel
id="collapsePanel"
styleClass="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</xp:panel>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<xp:link
escape="true"
id="link2">
Collapsible panel
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[
//function is called using x$("#{id:inputText1}", " parameters").
x$("#{id:collapsePanel2}").collapse("toggle");
function x$(idTag, param){ //Updated 18 Feb 2012
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
return($("#"+idTag));
}
]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</h4>
</div>
<xp:panel
id="collapsePanel2"
styleClass="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</xp:panel>
</div>
</xp:panel>
</xp:view>

Answer 1

You need to update the jquery something like this
$( "#link" ).on( "click", function(event) {
event.preventDefault();
$('#accordion .panel-collapse').collapse('hide');
$('#collapseTwo').collapse('toggle');
});
Working example http://bootsbin.com/bin/view/46/