I have a collapse panel on Bootstrap v3 and I would like to change the Active Panel Background Color by applying a new Class to it with Javascript or jQuery.
Here is my Panel
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Panel Title Name
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
</i>Link
</i>Link
</i>Link
</div>
</div>
</div>
</div>
I would like to apply the active state to .panel-heading when it's open, i tried lots of things, but none has worked for me, I appreciate your help and Thanks in Advance.
====================================== UPDATE ==============================
I managed to apply a class with this:
$('#accordion > .panel').on('show.bs.collapse', function (e) {
$('#accordion').find('.panel-heading').addClass("active-panel");
});
but it's applying the class to all the panels in my page, how can I fix the Java Selector ?
Try using $(this) :Demo Fiddle
$('#accordion > .panel').on('show.bs.collapse', function (e) {
$(this).find('.panel-heading').addClass("active-panel");
});
Related
I have a problem with bootstrap 3 collapse, after opening a panel programmatically it is possible to keep another panel open while reopening the first panel.
My HTML:
<button type="button" class="btn showpanel">Show panel 3</button>
<button type="button" class="btn hidepanel">Hide panel 3</button>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr/>
<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" data-parent="#accordion" href="#panel1">Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
And some JavaScript:
$(".hidepanel").on("click", function() {
$("#panel3").parent().hide();
});
$(".showpanel").on("click", function() {
$("#panel3").parent().show();
});
$(".openpanel").on("click", function() {
$("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
$("#panel3").collapse('hide');
});
My jsfiddle that demonstrates this issue
To reproduce:
Click the button 'Open panel 3'.
Click 'Panel 2' to open it. So far no problems.
Click 'Panel 3' to open it again. Panel 2 remains open!
So opening a panel programmatically seems to mess up bootstraps internal registration about panel states? I don't see anything visibly wrong with the 'state change' of the third panel (it's class changes from 'collapse' to 'in' and back as you would expect).
You can create a handler for the collapse show event which occurs just before any panels are displayed.
Add this to ensure any other open panels are closed before the selected one is shown:
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
Bootply demo
You can read more about the collapse events here: http://getbootstrap.com/javascript/#collapse
I think the problem is due to the way you are changing the open panel. Rather than using the 'show' feature you need to fire the click event on the appropriate panel link. For example with an accordion with an id "accordion", with three panels, if you want to show the 2 panel then use:
$("a[href=#accordion-2]").click()
Or whatever ID you have given your second panel (I use twitterboostrapmvc so the panel ids are auto-generated from the accordion ID).
For anyone using data-target attributes to control the accordion (rather than the href attribute), this is an adaptation of ProfNimrod's answer which will click the relevant element if the target is currently hidden. (Note that the if check relies on setting up the accordion with the collapsed class applied by default, which I find useful anyway to take advantage of using css to put a chevron icon on the accordions).
var expandAccordion = function() {
var header = $('[data-target="#accordion-0"]');
if (header.hasClass('collapsed')) {
header.click();
}
}
I have a jquery plugin that creates following html
<div class="panel-heading">
<h4 class="">
<a data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">Select Gigs</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<input type="text" class="input-text-field margin-medium-bottom" placeholder="Search" />
</div>
</div>
...... and some other divs here .....
I want to toggle div with id collapse2 when click on <a></a> above it. It works fine if I add the html inside hbs file. But when I create above html inside jquery and insert into the DOM as follows it change the url to domain/#collapse2
_initializeAutoComplete: function () {
Ember.$('#' + this.get('divId')).setAutocomplete({
data: this.get('dataTree'),
multiSelect: true,
selectingType: 3
});
}.on('didInsertElement')
});
How can I make the toggling work without ember going to href as a url change?
Appreciate any help.
Move the bootstrap attributes to the div above (or h4 or create new as your need)
<div class="panel-heading" data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">
<h4 class="">
Select Gigs
</h4>
</div>
I have an accordion div (panel-collapse), at the end of the panel I have a submit button, initially, all the panel div are closed, I want to keep the state of the div the same after the submit reload.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
On a regular form submit the page gets reloaded and resets everything, but if you submit the form Asynchronously using ajax nothing will change on your page. Using php + jQuery, you could do something like this:
$(document).on("click","#submitButton",function(e) {
e.preventDefault();
var formData = $("#formID").serialize();
$.post("your_php_file.php",formData,function(response) {
console.log(response);
});
});
Only way to preserve setting without async requests is using cookies.
You can set them via Javascript:
(http://www.w3schools.com/js/js_cookies.asp)
Probably like assigning an array of active collapse panels
var active_panels=[0,1,2];
$.cookie('active_panels', JSON.stringify(active_panels))
Without jQuery see W3C specification
I am trying to add/remove a class of an element by clicking on a header. The problem I am facing is that the div I am targeting to show does not have an unique class, no ID and is on the same level as the header I am clicking on:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
</div>
I have 4 of these divs below each other.
I am trying to find the right selector in jQuery to be able to do the following:
Click on div with class: "panel-heading"
Select the div with the class: "panel-collapse collapse"
Add a class to this div called: "in"
This is what I got so far:
$('.panel-heading').click(function() {
$('.panel-collapse').addClass('in');
});
But because I have multiple div's with this class, it opens them all...
Now you can try to this
$('.panel-heading').click(function() {
$('.panel-collapse').removeClass('in');
$(this).next('.panel-collapse').addClass('in');
});
Demo
$(document).ready(function(){
$('.panel-heading').click(function() {
$('.panel-collapse').removeClass('in');
$(this).next('.panel-collapse').addClass('in');
});
});
.in{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
</div>
This will help
$('.panel-collapse.collapse').addClass('in');
This will only select the element which have both panel-collapse and collapse class .
Can you try:
$('.panel-heading').click(function() {
$(this).closest('.panel-collapse').addClass('in');
});
You can use this to refer current selector
jQuery
$('.panel-heading').click(function() {
$(this).siblings('.panel-collapse.collapse').addClass('in');
});
In order to select an element at the same level, you can use .next() function like this:
$('.panel-heading').on('click', function() {
$(this).next('.panel-collapse.collapse').addClass('in');
});
.in {
padding:10px;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
</h4>
</div>
<div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
</div>
</div>
You can use next since the div of class panel-collapse collapse is a direct sibling to the panel-heading div, also use toggleClass which is better in your case:
$('.panel-heading').click(function() {
$(this).next('div').toggleClass('in');
});
You can use this selector instead
$('.panel .panel-collapse:first-child').addClass('in');
Or
$('.panel-heading').next('.panel-collapse').addClass('in);
You can change your code to apply to the immediate sibling of .panel-heading only as such:
$('.panel-heading').click(function() {
$(this).siblings('.panel-collapse').addClass('in');
});
Note the usage of this with refers to the element that raised the event (i.e. click event).
Basically you just need to find the current elements next sibling and add a class to it:
$('.panel-heading').click(function() {
$(this).next().addClass('in');
});
That will work if the panel-collapse is always after you panel-heading, else to be safe, you can do:
$('.panel-heading').click(function() {
$(this).next(".panel-collapse").addClass('in');
});
Use the reference of the clicked div and try this code :-
$('.panel-heading').click(function() {
$(this).next('.panel-collapse').addClass('in');
});
Hope this will work with your case.
I changed twitter bootstrap's behaviour so the whole panel-heading would trigger the accordion. This results in the 'up' icon not changing in the 'down' icon anymore.
I am trying to fix this, but to no avail. How can I restore the correct behaviour of these icons?
<script>
$(document).ready(function() {
$('.accordion-toggle').on('click', function(e) {
e.preventDefault();
if (!$('.panel-collapse').hasClass('.collapsed')) {
console.log('toggle collapsed class')
$('.indicator').removeClass('.glyphicon-chevron-up');
$('.indicator').addClass('.glyphicon-chevron-down');
}
});
});
</script>
Here's the structure of one of my accordion panels:
<div class="panel panel-default">
<a href="#collapseOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
<h4 class="panel-title">
Title
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse in">
<div class="panel-body">
<center>
<p>Some body..</p>
</center>
<form class="form-search">
<h2 class="form-search-heading">Some heading..</h2>
<input type="text" class="input-block-level" placeholder="Zoekterm" id="search-box">
<div id="resultaten"></div>
</form>
</div>
</div>
</div>
PS: I'm using Bootstrap 3.0.1
Don't use periods with the addClass and removeClass methods:
$('.indicator').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');