Niks
Reputation: 95
getting a menu to close when another menu is clicked
I have a menu and it's open when the user is on that page. So when the user clicks on another menu then the menu that is open needs to close and the other menu opens. So far I've only managed to get the menu to open when clicked. I can't get the other open menu to close.
My HTML
<div class="col-lg-4 col-md-4">
<div class="second_menu">
<div id="second-menu" class="collapse navbar-collapse menu_two">
<ul class="nav navbar-nav inside-nav">
<li class="active_sub_menu">
<a href="javascript:void(0);">Menu 1</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 1</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 2</a>
<ul class="sidenav_wrapper" style="display: none;">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 2</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 3</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 4</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 5</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 3</a>
<ul class="sidenav_wrapper" style="display: none">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 6</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 7</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 8</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
My CSS
.active_sub_menu .sidenav_wrapper {
display: block;
}
My JS
$( ".sidenav_active" ).parent().css({"display":"block"});
$('ul.navbar-nav li').click(function(){
$(this).find('.sidenav_wrapper:first').toggle();
});
My jsfiddle: JSFIDDLE
Upvotes: 0
Views: 2838
Answers (7)
Shaunak D
Reputation: 20626
Hide the :visible elements, before showing the currently clicked menu.
$('.sidenav_wrapper:visible').not($(this).find('.sidenav_wrapper:first')).hide();
or if you want to keep current div opened,
$('.sidenav_wrapper:visible').hide();
Or a more simple one liner using .add() and .toggle() on a single collection,
$('.sidenav_wrapper:visible').add($(this).find('.sidenav_wrapper:first')).toggle();
Upvotes: 1
Saravanabalagi Ramachandran
Reputation: 8889
All you need is
Accordions. You will see it do magic!
I believe accordions solve your problem easily. Added advantage is that you can do it neat and clean using accordions.
Nest as you add and scale
This contains menus, each containing sub-menus, of which only one shall be open at a time and sub-menus containing tertiary-menus, of which only one shall be open at a time.
Keep your code clean
No need to write several lines of click listeners and togglers. All you need to do is to add bootstrap (css and js) and jQuery (js) and this will function out of the box.
I think you're looking for something like this:
Save this as something.html and open it in browser
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body>
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#name-parent-select">
<h4 class="panel-title">Name</h4>
</a>
</div>
<div id="name-parent-select" class="panel-collapse collapse in">
<div class="panel-body">
<div class="input-group">
<input id="nameFill" type="text" class="form-control" placeholder="Type name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#number-parent-select">
<h4 class="panel-title">Number</h4>
</a>
</div>
<div id="number-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div class="input-group">
<input id="phoneFill" type="text" class="form-control" placeholder="Type number...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#group-parent-select">
<h4 class="panel-title">Group</h4>
</a>
</div>
<div id="group-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type group name...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#call-type-parent-select">
<h4 class="panel-title">Call Type</h4>
</a>
</div>
<div id="call-type-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="missedFill" type="checkbox"> Missed </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="incomingFill" type="checkbox"> Incoming </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="outgoingFill" type="checkbox"> Outgoing </label> </div> </li>
<li> <div class="checkbox call-type-checkbox"> <label> <input id="blockedFill" type="checkbox"> Blocked </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#date-parent-select">
<h4 class="panel-title">Date</h4>
</a>
</div>
<div id="date-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> Today </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Yesterday </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Week </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Fortnight </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Last Month </label> </div> </li>
</ul>
<div id="sub-accordion-date" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-select">
<h4 class="panel-title">Custom Date</h4>
</a>
</div>
<div id="between-date-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Select date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-date" href="#between-date-range-select">
<h4 class="panel-title">Custom Range</h4>
</a>
</div>
<div id="between-date-range-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End date... dd/mm/yyyy">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-calendar"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#time-parent-select">
<h4 class="panel-title">Time</h4>
</a>
</div>
<div id="time-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> Morning </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Afternoon </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Evening </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> Night </label> </div> </li>
</ul>
<div id="sub-accordion-time" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-time" href="#between-time-select">
<h4 class="panel-title">Custom</h4>
</a>
</div>
<div id="between-time-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start time... hh:mm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End time... hh:mm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#duration-parent-select">
<h4 class="panel-title">Duration</h4>
</a>
</div>
<div id="duration-parent-select" class="panel-collapse collapse">
<div class="panel-body">
<div id="sub-accordion-duration" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#greater-than-duration-select">
<h4 class="panel-title">Greater than</h4>
</a>
</div>
<div id="greater-than-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#less-than-duration-select">
<h4 class="panel-title">Less than</h4>
</a>
</div>
<div id="less-than-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 minute </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 5 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 10 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 30 minutes </label> </div> </li>
<li> <div class="checkbox"> <label> <input type="checkbox"> 1 hour </label> </div> </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#sub-accordion-duration" href="#between-duration-select">
<h4 class="panel-title">Between</h4>
</a>
</div>
<div id="between-duration-select" class="panel-collapse collapse">
<div class="panel-body">
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start duration... mm:ss">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
<div style="padding-top:10px;"> </div>
<div class="input-group">
<input type="text" class="form-control" placeholder="End duration... mm:ss">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span style="font-size:20px;" class="glyphicon glyphicon-time"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"> </script>
</body> </html>
You'll say after running this... LOLZ
Hurrah! It works...
Upvotes: 0
Luke P. Issac
Reputation: 1591
Instead of using toggle, add a class in css to display it as block. Then, use addClass() and removeClass() accordingly on appropiate events. You may need to use .not() to target all other li than the currently clicked one.
Upvotes: 0
madalinivascu
Reputation: 32354
Use this simple method:
$( ".sidenav_active" ).parent().css({"display":"block"});
$('ul.navbar-nav li').click(function(){
$('.sidenav_wrapper').hide();
$(this).find('.sidenav_wrapper:first').toggle();
});
jsfiddle: http://jsfiddle.net/rsewsg4t/3/
Upvotes: 0
Sanchit
Reputation: 541
When you show the current .sidenav_wrapper, you will need to hide the other .sidenav_wrapper.
So just add $("li ul.sidenav_wrapper").css("display","none"); in the .click() function before you the toggle the current .sidenav_wrapper
Upvotes: 0
Robin Carlo Catacutan
Reputation: 13679
Add this :
$('ul.navbar-nav li').find('.sidenav_wrapper:first').hide();
So it will hide them all first then show the selected one.
Upvotes: 0
NachoDawg
Reputation: 1544
The short way to do it, that doesn't really allow animations is like this
$(menuThing).on('click', function(){
$(menuThing).toggle(false);
$(this).toggle(true);
})
It closes 'all' menues, then opens the on you currently clicked on. This works visually as long as you dont do slideToggle() or something like that. Ask away if you need more clarification
Upvotes: 0
Related Questions
- How can I close one menu when another is opened with Click?
- Close menu when clicking the screen or another button
- How to close one sub menu when clicking another sub menu
- Open menu on click close other menus
- JavaScript Close Menu On Click
- How to close this menu after click
- jQuery Menu - Click to Open but Close the Others
- jQuery Close dropdown menu open when another menu is clicked
- how to make the menu close if it is clicked out
- Jquery Close menu div on a click event