I have multiples accordions in the same page. Some of them inside another accordion.
When one panel is clicked, I need to close all open panels. This is simple:
$('.panel-group').on('show.bs.collapse', function (event) {
$('.collapse.in').collapse('hide');
});
But I need to check if the panel is not parent of the clicked panel. How can I do this?
An example of my issue: http://codepen.io/anon/pen/RRkBJw?editors=1010
I had a similar problem with nested accordions. The following answer might help. See this answer/question.
Found a solution:
$('.panel-group').on('show.bs.collapse', function (event) {
var parent = $(event.target).parents('.collapse.in');
$('.collapse.in').not(parent).collapse('hide');
});
Related
JS Fiddle Example
I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
$(document).on('click', '.dd-box', function() {
// Comment out the return statement below and the links will start working.
return false
});
The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
The reason I need this code is because I don't want the dropdown boxes to close when click events happen within them.
I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?
you should put stopPropagation
$(document).ready(function() {
$("a").click(function(e) {
e.stopPropagation();
});
...
see JSFiddle
I have set up bootstrap to hide currently open panels when opening a new panel using:
$('.collapse').on('show.bs.collapse', function () {
$('.in').collapse('hide');
});
I would like to extend this so that nothing happens if you click on a currently open panel, i.e. the open panel should stay open when clicking on it. It should only collapse when clicking on other collapsed panels.
I tried it like this, but it doesn't work:
$('.collapse').on('show.bs.collapse', function () {
$('.in').not(this).collapse('hide');
});
Is this possible somehow?
JSFiddle
Bootstrap adds the class 'in' to open panels, you can use that to detect weather the panel is already open, if so then you can skip the collapsing by invoking a event.stopPropagation() you can read more about stopPropagation here.
$('.panel-title > a[data-toggle="collapse"]').click(function(e){
target = $(this).attr('href')
if ($(target).hasClass('in')) {
e.preventDefault(); // to stop the page jump to the anchor target.
e.stopPropagation()
}
})
jsfiddle
According to #Sammy answer - for the Bootstrap 4.x you have to change
if ($(target).hasClass('in'))
to
if ($(target).hasClass('show'))
I guess this is a noob question. I want Bootstrap "navbar-collapse" to close by clicking away or by clicking one of list items. I found this code somewhere and it works.
$(document).on('click',function() {
$('.collapse').collapse('hide');
});
But this code also makes Bootstrap "panel-collapse" elements close by clicking away and of course I don't want this to happen.
How can I specify that I want this code to work only for "navbar-collapse" elements?
Give your navbar collapse elements a new class and assign it inside:
$('.NewClassName').collapse('hide');
Note that you ADD that class to the navbar collapse elements without removing the old class.
Your code is correct.
The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#navbar-collapse').hasClass('in')){
$('.collapse').collapse('hide');
}
})
Also, make sure you have the
<script src="/js/bootstrap.min.js"></script>
in your file.
Check whether you are clicking outside the navbar. Collapse method can be fired expectedly by using our reference to the navbar
$(document).click(function (event) {
var target = $(event.target);
var $navbar = $(".navbar-collapse");
var opened = $navbar.hasClass("in");
if (opened === true && !target.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
If you are using the bootstrap navbar class, you can simply do:
$('.navbar .collapse').collapse('hide');
This will hide all collapse elements which are children of the navbar class.
I have following JsFiddle for editing a Div, now I some how want too add a div which in edit mode by default.
When i click on Add New div,new div is added and then it can be edited by clicking Edit .
But i was wondering is there a way when i click on ADD New Div the div should be by default in Edit mode. Is there any way i can achieve it.
Following is Js Fiddle
Thanks For Help :)
Change your function as follows:
$("#add").click(function () {
$('#accordion').prepend($("#appendpanel").clone().removeAttr('id').find('.panel-title, .panel-collapse').attr('contenteditable',true).css('border','2px solid'));
});
check this JSFiddle
Updated Fiddle as per comments
Note:
There are other neat ways for doing what you want.
You can simply keep a hidden editable div, add its clone and make it visible..
Or create a function that dynamically adds the mark up you need..
Side notes: Please avoid using inline-css, here is why: Why Use CSS # MDN
for changing style attributes jQuery has a dedicatedcss() function
You don't need two $(document).ready() functions
Not a one-liner, but does the job ;)
$("#add").click(function () {
var clone = $("#appendpanel").clone().removeAttr('id');
$('#accordion').prepend(clone);
// trigger a click event on the button, which makes the required div's content-editable
clone.find("#edit1").trigger("click");
});
Updated fiddle
Updated:
Use this code in $('#accordion').on('click', '.delete-link', function () {
var children = $(".panel");
// get those not hidden
children = children.filter(
function(index){
return children.eq(index).css("display") !== "none";
}
).length;
if(children === 1){ // the only child left is "Add new div"
$("#message").show(500);
}
And this in $("#add").click(function () {
$("#message").hide(500);
Updated fiddle
I have a standard bootstrap 3 accordion panel with a dynamic number of panels. I need to display another div with information specific to the panel that is open. I have trapped the open event and tried to identify the calling panel with the following code:
$(document).on('click', "#accordion_a", function(){
$('#accordion_a').on('shown.bs.collapse', function (e) {
alert('Calling #' + e.currentTarget.id);
})
})
However it just returns the parent panel set "#accordion_a." (and for some reason fires multiple times) So how can I identify which panel is open?
there are some issue in your javascript, I would suggest to use the
$(function() {});
instead of
$(document).on('click', "#accordion_a", function(){});
And then the event shown.bs.collapse must be triggered on the "collapse" block not on a link.
Please check this demo : http://jsfiddle.net/V8h9a/
And let me know if it solves your issue.