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.
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 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');
});
I have a basic shopping website built on WordPress and Woocommerce. Naturally, a lot of the buttons and links have Javascript functions preventing the default behavior of going to the link and doing something else instead. Unfortunately, if I set PJAX to select all $('a') elements, then the AJAX functions (or javascript such as even dropdown) functions would seize to work properly and PJAX would take over and refresh the page.
For example, if I would click on a Bootstrap dropdown link, it would go to the link rather than open the dropdown.
I want to know if there's a way to select elements (using jQuery) that only go to their links and have no JS events listening to them.
Try this demonstration and let me know if it works for your scenario.
HTML:
Link 1
Link 2
Link 3
Link 4
<br>
<br>
<button id="test">Which links have no jQuery click event bound?</button>
jQuery:
$(function() {
// Assign handler to links with class 'link-with-handler'
$('.link-with-handler').click(function() { alert('handled'); });
// Test function
$('#test').click(function(){
// Get all links
var links = $('a');
// Iterate through links testing each one for the event handler
$.each(links, function( index, value ) {
var ev = $._data(value, 'events');
if (!ev || !ev.click) {
alert(value.innerText + ' has no jQuery click handler bound to it.');
}
});
});
});
http://jsfiddle.net/goq7a6bn/2/
I am trying to get an shown event fired at dropdown at this site running on BS3.0
http://hmelius.com/avant/index.php
I have tried this code in the console (from the BS3 documentation page) but with no luck
$('.dropdown-toggle').on('shown.bs.dropdown', function () {
console.log("shown");
});
I believe the events fire on the "parent" not the toggle, so it would be the element above the toggle with .dropdown or .btn-group; the dropdown wrapping element
take a look at the source to see what I mean: https://github.com/twbs/bootstrap/blob/master/js/dropdown.js
Based on #monastic-panic 's comment this works
$(".dropdown-toggle").parent().on('show.bs.dropdown', function () {
console.log("shown");
});