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();
}
}
Related
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 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");
});
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');
My HTML is:
<div id="accordion-container">
<div class="accordion" id="navaccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu">
<strong>My Menus</strong>
</a>
</div>
<div id="collapseMenu" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="navigation" id="navigationcontainer">
<span id="menutree">
MenuTree
</span>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks">
<strong>Quick Links</strong>
</a>
</div>
<div id="collapseQuickLinks" class="accordion-body collapse">
<div class="accordion-inner">
<div class="quicklinks" id="quicklinkscontainer">
<span id="quicklinkslist">
QuickLinks
</span>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue">
<strong>Queue</strong>
</a>
</div>
<div id="collapseQueue" class="accordion-body collapse">
<div class="accordion-inner">
<div class="queue" id="queuecontainer">
<span id="queuetree">
Queue
</span>
</div>
</div>
</div>
</div>
</div>
</div>
My example is here: http://jsfiddle.net/pdavis68/Xut4C/2/
If you remove the JavaScript code, you'll notice that the toggling of the collapse operates properly. If you click "Quick Links", "My Menus" closes and "Quick Links" opens.
If you leave the JS in, you'll notice that opening "My Menus" or "Quick Links" doesn't cause anything else to collapse, but if you open "Queue", it will still cause the others to collapse.
It doesn't seem to matter if I use "toggle", "show" or "hide" command in the collapse, it will break the toggling functionality.
Also, in the example, what ought to happen (by my reckoning, at least) is that that "My Menus" should toggle closed (which it does) and then "Quick Links" ought to toggle open (which it does NOT do.)
So, 2 questions:
How do I programmatically show/hide groups without breaking the toggle functionality?
How do I toggle things open?
1.Try to use collapse() with options, the 'parent' is important
$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });
Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/
2.Basically you have 2 ways:
Add class in to that div, e.g: <div id="collapseMenu" class="accordion-body collapse in"> cause that div to open.
Use collapse() with option 'toggle': true as above, when the div is closed.
Hope it helps.
Try activating your content as a collapsible element first. I skimmed over this part when reading the documentation and it really stumped me.
$('#myCollapsible').collapse({
toggle: false
})
After you activate it you can hide and show it as usual.
$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');
http://getbootstrap.com/javascript/#collapse-methods
You also can add data-parent="#navaccordion" to <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> and call without addional key 'parent' like .collapse({"toggle": true});