Develop Reference

Close menu when another item is hovered

I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!

You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});

You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});

Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.

So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...

$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});

click outside bootstrap menu to close it

I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question

Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.

$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it

Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy

How to keep one according tab opened always

Created simple accordion, which is working fine.
Issue found is : If am opening one accordion tab, if i click on it then it should not close.
if i opened another accordion then the before accordion should close and the new opened accordion should be opened only if I click on it again.
This is what I have tried.
In my implementation accordion tabs can be opened and close on its same click.
Jquery:
$('.info').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).toggleClass("open").next().slideToggle('fast');
//Hide the other panels
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this).next()).slideUp('fast');
});
Demo Link

You can put a condition check if clicked accordian has class="open" using below code -
if($(this).attr('class').indexOf('open')==-1)
$(this).toggleClass("open").next().slideToggle('fast');
Demo
EDIT - as suggested by Amin, we can use .hasClass method provided by jQuery like below
if(!$(this).hasClass('open'))
$(this).toggleClass("open").next().slideToggle('fast');
Demo with hasClass

You can also try this fiddle.
I have just added a callback function to the slideDown call.
$('.info').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).addClass("open").next().slideDown('fast',function(){
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this)).slideUp('fast');
});
//Hide the other panels
});
http://jsfiddle.net/etfs1L43/9/

i rewrote your js - since i understood your request, that you want to expand the clicked content only, if there is no current shown content...
http://jsfiddle.net/etfs1L43/12/
$(".accordion-toggle").on("click", function () {
if (!$(this).hasClass("open")) {
$(".open").next().slideUp('slow');
if (!$(".accordion-toggle").hasClass("open")) {
$(this).addClass("open").next().slideDown('slow');
} else {
$(".open").removeClass("open");
}
}
});

How to slideDown a fixed div once you press another button

What I am trying to do
Close a div with a secondary button and mimicking the slideDown script from the first button.
The problem
Once the footer button is pressed it displays my hidden div (#footerPanel) by pushing the header up. Once you click footer again it closes the panel and slides the header back into place.
The menu button will work as follow, once you hover over the button the site navigation will display (not included in JSFiddle). By having this I would like to have the ability to close the #footerPanel and have the header slide down, mimicking the close ability from the footer button.
What is happening now is, when I click menu the #footerPanel slides down but leaving the header stuck at the position where the div pushed it. Also when you move the mouse the div slides back up.
How can I go about fixing this issue? I tried a few solution but they all seem to have the same outcome.
The js
$('#more').toggle(function(){
//show its submenu
$('#footerPanel').slideDown(500);
$(this).parent().parent().animate({'bottom': "+=400"}, 500);
},
function () {
//hide its submenu
$('#footerPanel').slideUp(500);
$(this).parent().parent().animate({'bottom': "-=400"}, 500);
});
$(document).ready(function(){
$('#menu').hover(function(){
$("#footerPanel").slideToggle();
});
});
JSFiddle

Updated Fiddle: http://jsfiddle.net/9s33F/5/
I think I have what you are looking for. I added the following as a callback for when the animate function completes when opening the menu.
function () {
$(this).addClass('open');
}
Then in the click handler for menu add the following if statement:
if ($(this).closest('header').is('.open')) {
$('header').animate({'bottom': "-=400"});
}
Also, you're code will look cleaner and be less if you used .closest() rather than .parent().parent() and so on.
jQuery.closest: http://api.jquery.com/closest/

Collapsing a jQuery accordion when clicking a link outside of the accordion menu

I'm using this jQuery accordion menu found here jQuery Vertical Accordion Menu Plugin. The plugin is working well without much customization. The feature that I was really looking for that this plugin offers is persistent menu state after a page refresh. This plugin uses cookies to accomplish this. On to the problem...
If you click outside the accordion menu the state is still maintained. I'm trying to figure out a way to collapse the entire menu when a link is clicked outside of the accordion menu.
My first inclination was to find some way to delete or reset the data in state saving cookie when the window.location was equal to a certain URL. (At the moment it I be happy if when returning to the home page that the menu was completely collapsed).
I'm thinking the best solution would be some jQuery that if an was clicked outside of #Accordion-Navigation was clicked that it would reset the cookie or collapse the menu.
I'm open to anything.
I tried the following with no luck.
jQuery(document).ready(function(jQuery){
var siteurl = "http://myhomepageurl.com/index.php";
if (window.location.href == siteurl) {
jQuery.cookie('dcjq-accordion-1', null, { path: '/'});
}
});
Any suggestions at a more elegant solution would be greatly appreciated! Thanks for taking the time to have a look in advance!

There is a trick to do this, just bind an event handler on your html and body element.
If the accordion was clicked you stops the propagation, otherwise you collapse the accordion.
$(function () {
$('html').on('click', collapseAccordion);
$('body')
.on('click','.accordion', function (e) { e.stopPropagation() });
});
you should make a function collapseAccordion that collapses the accordion via an api call.

$(function () {
$('body').mousedown(function (e) {
if($(e.target).closest('.accordion').length != 1){
//click was outside accordion,
// so close it
}
});