Jquery Close/Open Multiple Toggles

Question

Hi, I have the toggle in my menu Working successfully for the two links that I have within it. Because the top link once toggled covers the other link, there is no problem. But since the link beneath it leaves the top link exposed, a user could click that and now have two toggled items open and pretty much stacked on top of each other. Is there a way for me to check if the other toggled item is open and if so, close it? Thanks!

<div class="parents-toggle">
 <a href="#" id="customize-toggle">Customize</a><br/>
 <div class="menu-toggle hidden" id="customize-menu">
 <div class="menu-toggle-one">
 <h3>Background</h3>
  <ul>
   <li><a href="#">Dark Wood</a></li>
   <li><a href="#">Wallpaper</a></li>
   <li><a href="#">Bricks</a></li>
   <li><a href="#">Planks</a></li>
   <li><a href="#">Default</a></li>
 </ul>
</div>     
<div class="menu-toggle-two">
 <h3>Layout</h3>
 <ul>
  <li><a href="#">Grid</a></li>
  <li><a href="#">List</a></li>
  <li><a href="#">Full</a></li>
 </ul>
</div>
</div>
</div>
<a href="/submit/">Submit video</a><br/>
<div class="parents-toggle">
 <a href="#" id="channels-toggle">Channels</a>
 <div class="menu-toggle hidden" id="channels-menu">
  <div class="menu-toggle-one">
  <ul>
   <li><a href="#">Automotive</a></li>
   <li><a href="#">Comedy</a></li>
   <li><a href="#">Movies</a></li>
   <li><a href="#">Weather</a></li>
  </ul>
 </div>
 <div class="menu-toggle-two">
  <ul>
   <li><a href="#">Business</a></li>
   <li><a href="#">Commercials</a></li>
   <li><a href="#">Music</a></li>
   <li><a href="#">Technology</a></li>
  </ul>
 </div>
</div>
</div>
</div>

<script>
 $("#customize-toggle").click(function () {
 $("#customize-menu").toggle();
 });
 $("#channels-toggle").click(function () {
 $("#channels-menu").toggle();
 });
</script>

Answer 1

What I do on my site is I added an event handler to the body element, and I use that as a catch-all, to check to see if the menu is open, and then if it is, close it.

Answer 2

You can adjust your jQuery slightly, since you already have a menu-toggle class on all the toggle menus, just hide those that aren't the ID you want in your click handler, like this:

$("#customize-toggle").click(function () {
   $(".menu-toggle:not(#customize-menu)").hide();
   $("#customize-menu").toggle();
});
$("#channels-toggle").click(function () {
   $(".menu-toggle:not(#channels-menu)").hide();
   $("#channels-menu").toggle();
});​

You can see a demo here.

Further, if you want, since your menus have a consistent layout, you can have one click handler that finds the toggle div relative to the link, no need for matching IDs, like this:

$(".parents-toggle > a").click(function () {
   $("div.menu-toggle").not($(this).siblings()).hide();
   $(this).siblings(".menu-toggle").toggle();
});​

You can see a demo of that here

And lastly, if you want a bit of animation, you can easily add it using .slideUp() and .slideToggle(), like this:

$(".parents-toggle > a").click(function () {
   $("div.menu-toggle").not($(this).siblings()).slideUp();
   $(this).siblings(".menu-toggle").slideToggle();
});​

You can see that here :)