Develop Reference

Bootstrap dropdown submenu closing upstream submenu

I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.
I've tracked it down to this JS:
$(function() {
$('li.dropdown-submenu').on('click', function(event) {
event.stopPropagation();
if ($(this).hasClass('open')){
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.
Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Need the best of both here!

I think you almost had it, you just needed to look for the different clicks.
The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
if ($(this).hasClass('test')) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
} else {
$('.dropdown-submenu ul').hide();
}
});
});
</script>
Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA

Maybe this is what are you looking for.
This code to close submenu when clicking another submenu.
Javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function(){
$(this).hide();
});
/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
}
});
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
And JSFiddle example : https://jsfiddle.net/synz/vasho634/

I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block"){
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
}
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});

Show more button hidden after click

I have a nice script where I show more after clicking a button. This button needs to be hidden after clicking.
This is what I have sofar:
$(function() {
$(".btn-down").next().hide().append('Show less');
$(".btn-down").click(function() {
$(this).next().slideToggle();
});
$(".btn-up").click(function() {
$(this).parent().slideUp();
});
});
My JSFiddle;
https://jsfiddle.net/w5n7zkwu/5/
An other way is just change the button text after click and put it below the hidden text.
I'm close but don't know how to fix this..

Add the .hide() before the .next() here
$(".btn-down").click(function() {
$(this).hide().next().slideToggle();
});
Display again your "show more" button with $(".btn-down").show(); here
$(".btn-up").click(function() {
$(this).parent().slideUp();
$(".btn-down").show();
});

Multiple buttons with the same #id to do the same function?

JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?

id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle

use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO

click elsewhere

i have problem with click event. click to another element with event(click), doesn't count like click elsewhere. I want active one element or none.
demo: http://jsfiddle.net/WP4RH/
code:
$('span').click(function(){
var $this = $(this);
if($this.hasClass('active')){
$this.removeClass('active')}
else $this.addClass('active');
$('div').click(function(){
if (!$this.has(this).length) {
$this.removeClass('active');
}
});
return false;
});

Add this at the beginning of your span event handler:
$('.active').removeClass('active');
Demo
This is assuming that you want multiple clicks on the same span to retain active. If you don't want that, then let me know and I can modify the code.
​

For starters, You should move the div handler outside and then removeClass based on div element.
$('span').click(function(e) {
e.stopPropagation();
$(this).parent().find('span').removeClass('active');
$(this).toggleClass('active');
});
$('div').click(function() {
$(this).find('span').removeClass('active');
});
DEMO: http://jsfiddle.net/WP4RH/1/

Don't bind a click handler inside a click handler, just check if the target is the div or the span inside the click handler instead. Also, when adding the active class to this, just remove it on any sibling span :
$('span').on('click', function(){
$(this).toggleClass('active').siblings('span').removeClass('active');
});
$('div').on('click', function(e){
if (e.target == this) $('span').removeClass('active');
});
FIDDLE
​

If you want to keep the toggle-off functionality when the span itself has been clicked, then you can use the following. Also, note that you're binding an event handler each time a span is clicked.
http://jsfiddle.net/WP4RH/7/
$("span").click(function() {
$(this).siblings("span").removeClass("active"); // remove from other spans
$(this).toggleClass("active"); // toggle this span
return false;
});
​
$("div").click(function() {
$(this).find("span").removeClass("active"); // remove from all spans
});

Set class to active and remove it when another menu item is selected bug

I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: http://morxmedia.com/clients/temp/45p/index_vertical.html
Here is the code I am using for this:
<script type="text/javascript">
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>

You are binding the click event to div elements when you should bind them to a elements like so
$(document).ready(function(){
$('.wizard-steps > div > a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});

Try this.
$(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
});

better to include that on a ready
$(document).ready(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});

As far as I can see (in your CSS). The class active should go on the div under wizard-steps and the parent of the a-tag.
Try this:
<script type="text/javascript">
$('.wizard-steps div a').click(function(e) {
if (e.preventDefault)
e.preventDefault();
else
e.stop();
$('.wizard-steps div').removeClass('active');
$(this).parent().addClass('active');
});
</script>

It can be done in another way using jquery using .not()
Jquery Code:
$('.wizard-steps div').click(function() {
$('.wizard-steps div').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/surendraVsingh/PLbbr/