GWTBootstrap Accordion enable/disable automatic close functionality when opening other accordions

[coder...@gmail.com]

Original question can be found on Stack Overflow

I have a list of 5 objects in an GWTBootstrap Accordion element

<div class="accordion" id="gwt-uid-1128">
    <div class="accordion-group innerObject" id="test1">
        <div class="accordion-heading">
            <a href="#gwt-uid-1129" class="accordion-toggle" id="gwt-uid-1130" data-toggle="collapse" data-parent="#gwt-uid-1128"><i></i>header1</a>
        </div>
        <div class="accordion-body" id="gwt-uid-1129"></div>
    </div>
    <div class="accordion-group innerObject" id="test2">...</div>
    <div class="accordion-group innerObject" id="test3">...</div>
    <div class="accordion-group innerObject" id="test4">...</div>
    <div class="accordion-group innerObject" id="test5">...</div>

</div>

The accordion-group elements contain a relatively long list of attributes. The purpose of using Accordions is to keep a manageable amount of data on the screen; as the user moves from one goup to another, the initial group collapses (see demo)

The Problem: in some instances, when comparing values from 2 or more lists, the user may wish to keep the accordion groups open. To do this I have implemented a checkbox to enable and disable the accordion functionality.

My first approach was to use the following jQuery to remove the surrounding Accordion div when the user activates the checkbox

$('#test1').unwrap();

This successfully removes the accordion div, and allows all accordion-groups to be opened by the user at once. The issue with this approach comes when placing the accordion div back in the html if the user should choose to add the accordion functionality again - by deselecting the checkbox. I can add the Accordion class using

$(".innerObject" ).wrapAll( "<div class='accordion' />");

and even add in the initial GWT generated id to this div so that it appears the same as my first code block, but the automatic opening and closing functionality does not return. First Question - Any ideas as to why this approach doesn't work?

After moving on from the above idea I then started looking at the data-parent attribute of the accordion-group elements. According to w3schools:

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

and this SO answer, removing the data-parent attribute value should remove the collapsible functionality.

$( ".innerObject > div.accordion-heading > a").removeAttr("data-parent");

Second Question - does GWTBoostrap implement accordions differently preventing this from working? Or am I doing something wrong in implementing this approach?