I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open.
I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:
<div class="tab-pane active" id="institutional">
<div class="accordion" id="accordion2">
{foreach name=loop from=$institutional item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
{$film->title()|escape} -
{$film->title_suffix()|escape}
</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
<div class="accordion-inner">
http://jsfiddle.net/dylanglockler/7qy8g/1/
----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.
I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids.
My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:
<div class="accordion" id="accordion1">
{foreach name=loop from=$home item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
The problem seems to be having the accordion inside the tab content.
When it's removed from the tab-pane it works fine: http://jsfiddle.net/skelly/7qy8g/2/
Related
I did my research on this and noted that there are 2 topics similar to this.
Bootstrap's tabs with data-toggle cause reload in angularjs
and
Using bootstrap collapse with angularjs
Both mentioned to replace href tag with data-target
So I did an attempt
BEFORE
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" **href**="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
AFTER
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" **data-target**="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
And now while there is no more redirect, it doesn't expand the accordion.
I understand that there is an AngularJS Accordion I can use, but I have a UI developer that does not know AngularJS and will give us codes in the above format, therefore, I want to bridge that gap whereby he gives us a piece of HTML that doesn't work as expected.
I noted that one of the comment mentioned.
The above solution (also exactly the same in Bootstrap documentation) only works when not using Angular, at least for certain versions. I am assuming this is why the Angular folks created this library Angular UI Bootstrap as a workaround to these sorts of conflicts. Haven't investigated it fully to understand exactly the conflict, but this article sheds some light on possibly related conflicts due to jQuery. – michaelok Jan 8 '16 at 17:28
What does when not using Angular means exactly in this case?
So I am making a website as my wishlist this year. Every wish has a collapsible menu (made with Bootstrap collapse) and something is not right.
Problem illustrated in picture:
As you can see, it is like the collapsible element is overlaying or a part of the next panel that should trigger the next collapsible element.
I have looked for bugs in my code multiple times and I really can't figure out why it is doing this.
So the
<div id="collapseOne" class="collapse">
is overlaying the
<a class="panel-link" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="panel panel-default">
<div class="panel-body">
All of my code is in a Codepen here.
My website is in Danish :)
1) First of all, you need to fix the hierarchy of HTML-tags. Which tag should be within another?
<a class="panel-link" ...>
<div class="panel panel-default">
<div class="panel-body">
...
</a>
...
<a class="#" ...>
...
</div>
</div>
</a>
2) Bootstrap's grid system involves one more hierarchy of blocks: the container contains rows and rows contain columns. So you need to wrap columns into rows.
See demo on CodePen.
Bootstrap normally closes other collapses when you click on one to open it.
Is there an option or hack to make it keep the collapses open unless explicitly closed without changing the look and layout of the panel-group?
Update 2020
Bootstrap 4
How do you make Twitter Bootstrap Accordion keep one group open?
Bootstrap 3
You can just remove the data-parent attribute that is normally used in the accordion markup.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
...
http://bootply.com/127843
See this demo:
http://plnkr.co/edit/OxbVII?p=preview
Idea:
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
2021 here:
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class.
Bootstrap docs:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
They use the following collapse element:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
This subscribes the collapse to events on #accordionExample, which is the main accordion element, via the data-parent attribute. Remove data-parent, and the collapse will no longer close when another one is expanded.
Bootstrap 4
NO NEED JAVASCRIPT
can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent
<div class=""
id="accordion{{$i}}">
<h3 class="" data-toggle="collapse"
data-target="#collapse{{$i}}"
aria-expanded="true"
aria-controls="collapse{{$i}}" class="mb-0">
Hai Im the clickable
</h3>
<div id="collapse{{$i}}"
class="collapse"
aria-labelledby="heading{{$i}}"
data-parent="#accordion{{$i}}">
<p>Hai Im the collapsible content</p>
</div>
</div>
basically want to toggle the visibility of a separate element by linking up with the toggling of a bootstrap-collapsed heading. in the case below, the clicking of "#producer" will expand/collapse "#collapseOne". i want that same function to make ".cv" appear and disappear too. i don't want other headings to affected, though, so it should be specific to just clicking "#producer".
markup:
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="producer">Producer Reel <em>For Hire!</em>
</a>
<a class="cv" href="#">
<i class="icon-file-text-alt"></i>my CV
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">...</div>
any help would be appreciated!
$('.accordion-toggle').click(function(){
$(this).next('.cv').collapse('toggle');
});
I'm trying to implement the twitter bootstrap collapse plugin (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse) and I can't seem to get it working. Thinking it was something wrong with my development environment, I set up a JSfiddle and I'm still getting the same issues. Here's the jsfiddle:
http://jsfiddle.net/qdqrT/1/
Here is the HTML which was copied directly from the bootstrap example.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
The CSS and javscript were taken directly from the bootstrap customize page, with only the collapse CSS and JS, and the trasition JS (which is a dependency for the collapse plugin).
Anyone know why this is broken?
I got it working. I think you might not be including all the required resources.
I ended up including a hosted version of bootstrap CSS and JS from BootstrapCDN
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
Here is the working version: http://jsfiddle.net/qdqrT/3/
I tried it with a newer version of bootstrap (3.3.4) and the code in the question worked when the correct files are included.
It wasn't necessary to use the CDN version of bootstrap (but you can if you wish).
I have bootstrap in a subdirectory and the following in my HTML:
<!-- Bootstrap CSS (put this in the header of your HTML file)-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Javascript (put this at the end of your HTML file)-->
<script src="bootstrap/js/bootstrap.min.js"></script>
(I realise that the question is old, but I think my answer is more up to date than the accepted answer and hopefully it will help someone)