ascendantofrain
Reputation: 302
Bootstrap Accordion without Bootstrap Panel Markup
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.
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>
Upvotes: 6
Views: 8774
Answers (4)
luison
Reputation: 2100
I know this is an old question but having the same issue and giving up know trying to implement it on a Wordpress site. This is the resulting code with Collapse working correctly but not maintaining only one open at the time as it should.
<div id="faq-accordion" role="tablist" aria-multiselectable="true">
<article id="post-12347" class="entry-post entry-post-fullwidth panel post-12347 faq type-faq status-publish format-standard hentry faq_category-reservas">
<div class="entry-content">
<header id="heading-12347" role="button" data-toggle="collapse" data-parent="#faq-accordion" href="#collapse-12347" class="" aria-expanded="true">
<h1 class="entry-title">HEADLINE ACC1</h1>
</header><!-- .entry-header -->
<div id="collapse-12347" class="entry-summary collapse in" role="tabpanel" aria-labelledby="heading-12347" aria-expanded="true" style="">
<p>answer to HEADLINE ACC</p>
<div class="entry-footer"></div><!-- .entry-footer -->
</div><!-- .entry-summary -->
</div><!-- .entry-content -->
</article><!-- #post-## -->
<article id="post-12365" class="entry-post entry-post-fullwidth panel post-12365 faq type-faq status-publish format-standard hentry faq_category-reservas">
<div class="entry-content">
<header id="heading-12365" role="button" data-toggle="collapse" data-parent="#faq-accordion" href="#collapse-12365" class="collapsed" aria-expanded="false">
<h1 class="entry-title">HEADLINE ACC2</h1>
</header><!-- .entry-header -->
<div id="collapse-12365" class="entry-summary collapse" role="tabpanel" aria-labelledby="heading-12365" aria-expanded="false" style="height: 0px;">
answer 2
</div>
<div class="entry-footer"></div><!-- .entry-footer -->
</div><!-- .entry-summary -->
</div><!-- .entry-content -->
</article><!-- #post-## -->
</div>Upvotes: 0
Klaas van der Weij
Reputation: 1114
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>
Upvotes: 6
Tim
Reputation: 1
This will do the job
$("a[data-parent='#j3_1']").on("click", function() {
var current = $(this).attr("href");
current = $(current);
$(".collapse.toplevel").each(function() {
if (!$(this).is(current)) {
$(this).collapse('hide');
}
});
});
Rename to
Upvotes: 0
ascendantofrain
Reputation: 302
Just heard back from an actual Bootstrap developer saying that this is currently not possible but is a planned feature for Bootstrap v4.0.
Upvotes: 2
Related Questions
- Controlling bootstrap accordion with jQuery
- Bootstrap Accordion without Panel
- BootStrap Accordion Panel
- Bootstrap accordion
- Bootstrap Accordion issue
- Bootstrap accordion
- Making Bootstrap Accordion with JQuery
- How to implement twitter bootstrap accordion?
- Twitter Bootstrap accordion feature
- twitter bootstrap accordion