Juggling multiple context menus within .toggle

Question

I'm further along in making this all work, but when I try to add some code that hides the others when one is clicked it expects a second click to hide again. How do I only show one menu at a time? PS These are not sibling menus.

$(function() {
  $("a[rel=tooltip]").tooltip({ position:"bottom" });
  $(".dd").toggle(function() {
      $("ul", this).show();
      $(this).addClass("on");
      $("ul a", this).click(function(e) {
         e.stopPropagation();
      });
      if $(".button1").click() {
        $("#contextMenu2, #contextMenu3").hide();
      };
      if $(".button2").click() {
        $("#contextMenu1, #contextMenu3").hide();
      };
      if $(".button3").click() {
        $("#contextMenu1, #contextMenu2").hide();
      };
    }, 
    function() { $("ul", this).hide(); $(this).removeClass('on'); }
  );
});

Answer 1

That's a lot of conditionals. You should try something a little different I think. I would put a second class on every button called .button or something equivalent. So one of the elements would look like this (I'm using a div because I'm not sure what you're using):

<div class="button button1"></div>

Then, what you can do is start every click even with a hide statement on all elements with class button, and follow up with a show statement on the one that was clicked.

UPDATED

$(function() {
    $("a[rel=tooltip]").tooltip({ position:"bottom" });
    $(".dd").click(function() {
        $(this).addClass("on");
        $("ul a", this).click(function() {
           return false;
        });
        $(".button").hide();
        $("ul", this).show();
    });
});

Answer 2

I got this to work how I wanted it. Thanks to this thread http://stackoverflow.com/questions/244392/jquery-toggle-state

  $(".dd").click(function() {
    $("ul", ".dd").not(this).hide();
    $("ul", this).toggle();
  });
  $(".wrapper").click(function() {
    $("ul", ".dd").hide();
  });