title: Using jquery to control css3 transitions to open and close nested menu dropdowns
body: <p>I am using Jquery to control the css3 transition (margin) animation of a nested dropdown menu. I can get the nested menus to dropdown on click of the link that triggers the event in the main part of the menu, then if I click the same trigger again it closes the dropdown which it is supposed to do. But if I click all the dropdown triggers all the dropdowns menus are all visible at the same time.</p>
  
  <p>What I am after is when I click another dropdown trigger in the same main menu, if one of the dropdowns is already open, the open one will close using css3 transition controled with Jquery as the new one opens. So only one dropdown can be open at a time.</p>
  
  <p>I am new to jquery and I am aware that the jquery below is not the best way to do this. Any guidance in the right direction is much appreciated.</p>
  
  <p><strong>Jquery:</strong></p>
  
  <pre><code>$(function() {  
      $("#drop1").click(function() {  
          $(".sub1").toggleClass("submenu");
      });  
  });
  
  $(function() {  
      $("#drop2").click(function() {  
          $(".sub2").toggleClass("submenu");
      });  
  });
  
  $(function() {  
      $("#drop3").click(function() {  
          $(".sub3").toggleClass("submenu");
      });  
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul {width:100%; list-style: none; display:block;}
  
  ul li {display:inline-block; width: 20%; height: 40px; float:left; background: #ccc; text-align:center;}
  
  ul li a {display:block; width:100%; height: 40px; position:relative;}
  
  .sub1, .sub2, .sub3 {width:300px; margin: -40px 0 0 0; position:absolute; z-index:-1;
  transition: margin 0.2s ease; 
  -moz-transition: margin 0.2s ease; 
  -webkit-transition: margin 0.2s ease;
  -o-transition: margin 0.2s ease;
  -ms-transition: margin 0.2s ease;}
  
  .submenu {margin:0; background: #666;}
  
  .sub1 li, .sub2 li, .sub3 li {text-align:center; width: 33%;}
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;normal&lt;/li&gt;
      &lt;li&gt;&lt;a id="drop1" href="#"&gt;drop&lt;/a&gt;
          &lt;ul class="sub1"&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a id="drop2" href="#"&gt;drop&lt;/a&gt;
          &lt;ul class="sub2"&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;normal&lt;/li&gt;
      &lt;li&gt;&lt;a id="drop3" href="#"&gt;drop&lt;/a&gt;
          &lt;ul class="sub3"&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
              &lt;li&gt;drop&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>