Menu
Is there any feasible way to create a bootstrap accordion control without having to use the 'panels' markup?? I have the collapse control working but I would like to be able to target parents for each section in the control.
In other words, I would like the "Revenue" and "Margin" buckets to toggle each other and inside of "Revenue" have "Revenue Current", "Revenue Base", and "Revenue Current vs. Base" toggle each other without disturbing the parent layers.
http://jsfiddle.net/Lp903gc5/
Markup
<div class="group-by">
<div class="jstree-preview group-dropdown">
<ul id="j3_1">
<li>
<span data-toggle="collapse" href="#collapse-j3_2" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Revenue</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_2" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_3">
<span>Revenue Current </span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_3">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_8">
<span>Revenue Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_8">
<li>
<span>Extended Zone Price</span>
</li>
<li>
<span>Net Amount</span>
</li>
<li>
<span>Revenue</span>
</li>
<li>
<span>Revenue Share at DN</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_13">
<span>Revenue Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_13">
<li>
<span>Matched Base Revenue</span>
</li>
<li>
<span>Matched Current Revenue</span>
</li>
<li>
<span>Matching %</span>
</li>
<li>
<span>New Sales Revenue</span>
</li>
<li>
<span>Non-Repeat Revenue</span>
</li>
<li>
<span>Normalized Base Revenue</span>
</li>
<li>
<span>Revenue Change %</span>
</li>
<li>
<span>Revenue Volume Change $</span>
</li>
<li>
<span>Total Revenue Change $</span>
</li>
</ul>
</li>
</ul>
<span data-toggle="collapse" href="#collapse-j3_23" data-parent="#j3_1" aria-expanded="false" class="collapsed">
<span>Margin</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_23" aria-expanded="false" style="height: 0px;">
<li>
<span data-toggle="collapse" href="#collapse-j3_24">
<span>Margin Current</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_24">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_29">
<span>Margin Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_29">
<li>
<span>In-scope Margin Index</span>
</li>
<li>
<span>Margin</span>
</li>
<li>
<span>Margin %</span>
</li>
<li>
<span>Margin per Unit</span>
</li>
</ul>
</li>
<li>
<span data-toggle="collapse" href="#collapse-j3_34">
<span>Margin Current Vs Base</span>
<i class="icon icon-arrow-right"></i>
</span>
<ul class="collapse" id="collapse-j3_34">
<li>
<span>Margin % Change (bps)</span>
</li>
<li>
<span>Margin Volume Change $</span>
</li>
<li>
<span>Matched Base Margin</span>
</li>
<li>
<span>Matched Current Margin</span>
</li>
<li>
<span>New Sales Margin</span>
</li>
<li>
<span>Non-Repeat Margin</span>
</li>
<li>
<span>Normalized Base Margin</span>
</li>
<li>
<span>Total Margin % Change</span>
</li>
<li>
<span>Total Margin Change $</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
534
This can be done by setting the 'active' property of jQuery Accordion as false.
If you'd like it to default open, add the additional class show . To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" . Refer to the demo to see this in action.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Expand or collapse accordion items on checkbox click in Angular Accordion component. By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
The 3.x version of bootstrap requires a panel class added to the container of the toggler + togglee within the data-parent.
In your example, this can simply be done by adding class="panel" to the first and second depth of <li> elements. I've made an example using your code over here:
http://www.bootply.com/15nIagFMbk
In a simpler example:
<ul id="accordion">
<li class="panel">
<a href="#c1" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 1
</a>
<p id="c1" class="collapse">
Some collapsable text 1
</p>
</li>
<li class="panel">
<a href="#c2" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 2
</a>
<p id="c2" class="collapse">
Some collapsable text 2
</p>
</li>
<li class="panel">
<a href="#c3" data-toggle="collapse" data-parent="#accordion" class="collapsed">
Toggle 3
</a>
<p id="c3" class="collapse">
Some collapsable text 3
</p>
</li>
</ul>
Just heard back from an actual Bootstrap developer saying that this is currently not possible but is a planned feature for Bootstrap v4.0.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
