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
Related
When I click the link of the panel, I would like to have text passed to the panel body. I have placed the onClick in each of the panel tags including the tag. The onClick calls myFunction, which is supposed to send text to the body of the panel. That is not happening. Any suggestions?
function myFunction() {
document.getElementId("panel-body").innerHTML = "it worked"
};
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" onClick="myFunction">Name</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</div>
You have to call the function with (): onClick="myFunction()"
The selector you tried to use would be .getElementById(), but in this case you want a more specific element. So the the css-selector would be #collapse1 > .panel-body which selects the elements with class panel-body which are direct children of #collapse1.
querySelector() selects the first element which fulfills the given css selector, querySelectorAll() would return all of them in an array-like structor NodeList.
function myFunction() {
document.querySelector("#collapse1 > .panel-body").innerHTML = "it worked"
};
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" onClick="myFunction()">Name</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</div>
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 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 am using bootstrap accordion in my code. On click on every list I will display Data and Icon will change.
<i class="fa fa-plus-square"></i>
will change to
<i class="fa fa-minus-square"></i>
My code:-
<div class="priority-lists">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind District Meters
</h2>
</div>
<div id="waterMindDistrictMeteres" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Pressure Points
</h2>
</div>
<div id="waterMindPressurePoints" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Service Points
</h2>
</div>
<div id="waterMindServicePoints" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to use some code:
My jsFiddle code
I will see icon are not working properly. I am looking for solution in CSS or JavaScript or jQuery.
You have to add .collapsed to your panel-headings! The first time .collapsed is not on that element, but bootstrap updated it on a click.
It does work fine by me now.
Updated fiddle
Please check on this link
Js Fiddle
You must add a class "collapsed" next to "panel-heading". your problem will be solved
You should init your icons with : fa-plus-square, not fa-minus-square.