title: Collapse all other accordion items when one is expanded
body: <p>I have an accordion menu that works nicely. But now, I want only one parent item expanded at a time. In other words, when I click to expand one parent item, any other expanded parent item needs to collapse. I thought adding a line to slide the sibling elements up would work, but either that's not it, or I'm doing it wrong. Any ideas?</p>
  
  <p>Here is my <a href="http://jsfiddle.net/7gxaprtt/6/" rel="nofollow">jsfiddle</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>CSS
  
  a
      {
          cursor: pointer;
      }
  
  .menu ul 
      {
          list-style: none outside none;
      }
  
  .menu li a 
      {
          line-height: 25px;
      }
  
  .menu &gt; ul &gt; li &gt; a 
      {
          color: #3B4C56;
          display: block;
          font-weight: normal;
          position: relative;
          text-decoration: none;
      }
  
  .menu li.parent &gt; a 
      {
          padding: 0 0 0 28px;
      }
  
  .menu li.parent &gt; a:before 
      {
          background-image: url("../images/plus_minus_icons.png");
          background-position: 25px center;
           content: ""; 
          display: block;
          height: 21px;
          left: 0;
          position: absolute;
          top: 2px;
          vertical-align: middle;
          width: 23px;
      }
  
  .menu ul li.active &gt; a:before 
      {
          background-position: 0 center;
      }
  
  .menu ul li ul 
      {
          border-left: 1px solid #D9DADB;
          display: none;
          margin: 0 0 0 12px;
          overflow: hidden;
          padding: 0 0 0 25px;
      }
  
  .menu ul li ul li 
      {
          position: relative;
      }
  
  .menu ul li ul li:before 
      {
          border-bottom: 1px dashed #E2E2E3;
          content: "";
          left: -20px;
          position: absolute;
          top: 12px;
          width: 15px;
      }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$( document ).ready( function( ) {
          $( '.menu li' ).each( function() {
                  if( $( this ).children( 'ul' ).length &gt; 0 ) {
                          $( this ).addClass( 'parent' );     
                  }
          });
  
          $( '.menu li.parent &gt; a' ).click( function(event) {
  
              if($(this).next('ul').is(':hidden'))
              {
                  event.preventDefault();            
  
                  $( this ).parent().toggleClass( 'active' );
                  $( this ).parent().children( 'ul' ).slideDown( 'fast' );
                  $( this ).parent().children.siblings( 'ul' ).slideUp( 'fast' );
              }
          });
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://www.google.com"&gt;Menu item 1&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.apple.com"&gt;Menu item 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 2.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 2.2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 2.2.1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 2.2.2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 2.2.3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 2.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.twitter.com"&gt;Menu item 3&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Menu item 1.2.3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Menu item 1.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>