I am pretty frustrate that the Bootstrap 3 accordion control doesn't seem to have a built-n class toggle for open/close on the heading of the accordion.
I need to have an accordion with one css class on the header when its child is open, and another for it closed. I'm close with the following code, but this doesn't cover the situation when a user closes and already opened pane without choosing a different pane -- it only works right if you keep choosing different panes.
The 3 things I need the headers to correctly show state:
when a pane is set to be opened by default (add "in" class to html of that pane)
when manually opened or closed, show right class
when closed by clicking a different pane open
I so far have
$(function() {
$('h4.panel-title').each(function() {
// check all headers to see if they have open children
var isOpen = $(this).closest('.panel').find('.panel-collapse').hasClass('in');
// and, if yes, set the class to "open"
if (isOpen) {
$(this).addClass('open');
}
});
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// then set the one clicked on to open
$(this).addClass('open');
});
With this html:
<div class="panel-group accordion-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
</div>
It didn't fully survive being pasted into a Fiddle, but here is is: http://jsfiddle.net/smlombardi/kW33s/
Try this,
$(function() {
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// remove "in" class from all collapse panel
$(this).closest('.accordion-group').find('.collapse').removeClass("in");
// then set the one clicked on to open
$(this).addClass('open');
$(this).parent().next(".collapse").addClass("in");
});
});
JSFIDDLE
I found this
Bootstrap 3 accordion styling on open/closed
I realized its better to hook into the BS3 accordion events than do the click event, since the issue I had was that the pane had the IN class when clicked even if the click was going to close it.
Related
I am using the bootstrap collapse class. My HTML Code:-
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<input type="checkbox" id="select" data-toggle="collapse" data-target="#collapse1"> Please Select
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
I want to access this in Javascript. What I want is when I click the checkbox or when the panel collapsed I want to do something during that time. How to access the collapse using javascript?
I am trying this code:-
$('.collapse').on('hide.bs.collapse', function () {
//my funcionality here
});
But this is not working. Can anyone tell me what is wrong in this code.
According to bootstrap documentation, your jquery selector is wrong. You should pass div id which is going to be a collapse.
$('#collapse1').on('hide.bs.collapse', function () {
//my funcionality here
});
I'm implementing an spoiler box bbcode in phpbb which uses an bootstrap-based style.
But i'm having problems since phpbb dont give any unique identifier for each bbcode processed, so i cant use an id for the collapsible div due to inevitable duplication of the code every time a member uses the bbcode in a text.
The base html is like this:
<div class="panel-group">
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">SPOILER!</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">{TEXT}</div>
</div>
</div>
So how i can make the panel body collapsable without an id?
Thanks.
Well, the PT stackoverflowers were fast.
Here the translated answer:
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" onclick="$(this).parents().next('div.panel-collapse.collapse').collapse('toggle');">SPOILER!</a>
</h4>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">{SPOILER}</div>
</div>
</div>
Isnt the best form, but if you cant get any ID, its an alternative.
Here the jsfiddle
I have a collapsing panel body, like this (the fiddle, which now has the fixed code):
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" data-toggle="collapse" href="#collapseOne">
1) collapsing link
2) not collapsing link
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche ...</div>
</div>
</div>
The data-toggle is set on the panel title, because I want a click anywhere on it to open the other panel. Except the second link. My goal is to disable the collapsing behavior for the second link. What is the best/simplest way to achieve that?
Important: I do not want to set the data-toggle on the first link only. I want a click anywhere on the panel to trigger the even, except on the second link.
You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" data-toggle="collapse" href="#collapseOne">
1) collapsing link
2) not collapsing link
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche ...</div>
</div>
</div>
Stop the event propagation like this:
$('.no-collapsable').on('click', function (e) {
e.stopPropagation();
});
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');
});