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
});
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?
Is there a way to have the header be clickable so that it acts as accordion, but buttons that are inside of it, not?
<div class="row">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-clickable" data-toggle="collapse" data-parent="#accordion3" data-target="#collapseThree">
<div class="btn-group pull-right">
2015
2016
2017
2018
</div>
<h4 class="panel-title" style="padding-top: 5px;">Plugin Frequency Use:</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
As is right now, every click on the header or the button collapses the body of the div.
Also little dropdown arrows show up next to the button. How can i get rid of them?
You can try to stop event propagation:
2015
please read more about stopPropagation method and event object
inside of ngClick directive
this might help you
$("#accordion3").on('click', '.btn' , function(){
return false;
})
try here jsfiddle
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();
});
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.