jquery toggle close other opened divs - javascript

I have an issue with using toggle where i need to close other divs that are already opened, so only the div you click on is open at one time, but still toggles.
<script type="text/javascript">
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
</script>
<ul>
<li ><span id="europe"></span>Europe
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe"></span>Asia
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
Any ideas on what I can add in to get the click function to close every other div class="flyout" except the one its on?
have a look at http://www.footballadvisor.net/map/ to see the issue
thanks

Check this, please:
http://jsfiddle.net/MbTRD/1/
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
​

The name of the country should be inside the span if you want to catch the click event.
The following close everything except the element you clicked :
<script type="text/javascript">
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(".flyout").hide();
$(this).siblings(".flyout").toggle(500);
});
});
</script>
<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

check this http://jsfiddle.net/MbTRD/5/ i hope this will helpful for you

Here an improvement to your jQuery: Fiddle
$(function () {
$(".flyout").siblings("span").click(function () {
$(".flyout").slideUp(200, function() {
$(this).siblings(".flyout").toggle(500);
});
$(this).siblings(".flyout").toggle(500);
});
});

Related

Dynamic element doesn't respond on call

I have a menu and when I click a button to add a item to another item( to be a submenu) the item/parent doesn't respond to the jQuery code for the parent items.
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").click(function(event) {
event.preventDefault();
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>
Use
$("body").on('click',".test",function(event) {})
try:
$(".test").on('click',function(event) {})
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").on('click',function(event) {
event.preventDefault();
if($(this).parent().find("ul").length == 0) {
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
}
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>

Close other menus on page before new one opens

$(function () {
var pull_1 = $('#pull-main-menu');
var menu_1 = $('#mobile-menu');
pull_1.on('click', function (e) {
e.preventDeenter code herefault()
`enter code here`;
menu_1.slideToggle();
});
});
$(function () {
var pull_2 = $('#pull-first-menu');
var menu_2 = $('#first-menu-top-left');
pull_2.on('click', function (e) {
e.preventDefault();
menu_2.slideToggle();
});
});
$(function () {
var pull_3 = $('#pull-second-menu');
var menu_3 = $('#welcome');
pull_3.on('click', function (e) {
e.preventDefault();
menu_3.slideToggle();
});
});
HTML:
<div id="mobile-menu">
<ul>
<li></li>
<li></li>
</ul>
</div>
<ul id="first-menu-top-left">
<li></li>
<li></li>
<ul>
I have 3 functions which open 3 different menus on a page. I just can't figure out how to write conditions for these functions that will close the opened menu before new one gets opened.
You can alter your html a little to use classes, and combine all those functions into one. Run the snippet below to see it work.
$(document).ready(function(){
$('.ddtoggle').click(function(e){
$(this).next('.ddmenu').slideToggle();
$('.ddmenu').not($(this).next('.ddmenu')).hide()
}).next('.ddmenu').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
menu 1
<div id="mobile-menu" class="ddmenu">
<ul>
<li>menu item 1
</li>
<li>menu item 1
</li>
</ul>
</div>
menu 2
<ul id="first-menu-top-left" class="ddmenu">
<li>menu item 2
</li>
<li>menu item 2
</li>
<ul>
You can use a common class for your a elements (e.g pull-menu). In such a case you can have one function instead of 3:
$(function () {
$(".pull-menu").bind("click", function(evt){
$(".pull-menu").not($(this)).next("ul").hide();
$(this).next("ul").slideToggle();//Or slideDown()
evt.preventDefault();
})
});

JQuery - Make .slideToggle specific to each list

I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/
The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle
Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});

When User Open One DropDown Close Other DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>
Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle
I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );

High-light menu item

I have a one-page website with a menu like this:
<ul id="menu-menu" class="nav">
<li id="1">Item 1</li>
<li>Item 2
<ul>
<li id="1" class="sub">Item 2-1</li>
<li id="1" class="sub">Item 2-2</li>
<li id="1" class="sub">Item 2-3</li>
</ul>
</li>
<li id="1">Item 3</li>
<li id="1">Item 4</li>
</ul>
The menu is high-lighted by JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
var J = jQuery.noConflict();
J(document).ready(function(){
J('.nav li:first').addClass('current');
J('ul.nav').each(function() {
J(this).find('li#1').each(function(i) {
J(this).click(function(){
J(this).addClass('current');
J(this).siblings().removeClass('current');
});
});
});
});
/* ]]> */
</script>
The problem is that when I click on Item 3 and than on Item 2-2, Item 3 stays high-lighted., and when I than click on Item 1, Item 2-2 stays high-lighted.
Any ideas how to fix this?
var J = jQuery.noConflict();
J(function(){
J('ul.nav li:first').addClass('current');
J('ul.nav li').click(function (e) {
J('ul.nav li.current').removeClass('current');
J(this).addClass('current');
e.stopPropagation(); // prevent the event click from bubbling up
});
});
Untested, but try to replace
J(this).addClass('current');
J(this).siblings().removeClass('current');
with
J('ul.nav .current').removeClass('current');
J(this).addClass('current');
.
The problem is that the sibling selector only finds just that, the siblings, and not the other elements.

Categories

Resources