title: jQuery - Click one div, close all others issue
body: <p>I have a set of divs that when I click on one, it should open that particular one and close all others that are open. Should only be one open div if any. Having difficulty excluding the one I click from closing. Anyone have any thoughts? Javascript and HTML to follow:</p>
  
  <pre><code>    $('.m_box').hide();
      $('.a_box').hide();
  
      $('#m2012').click(function(){
          //$('.m_box').hide();
          $('#m2012_box').toggle();
      });
  
      $('#m2011').click(function(){
          //$('.m_box').hide();
          $('#m2011_box').toggle();
      });
  
      $('#m2010').click(function(){
          //$('.m_box').hide();
          $('#m2010_box').toggle();
      });
  
      &lt;div id="m2012" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"&gt;
          &lt;div id="m2012_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"&gt;
              &lt;div class="list_header"&gt;
                  &lt;p&gt;2012&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="items"&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 1
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 2
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 3
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 4
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 5
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 6
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="m2011" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"&gt;
          &lt;div id="m2011_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"&gt;
              &lt;div class="list_header"&gt;
                  &lt;p&gt;2011&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="items"&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 1
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 2
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 3
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="m2010" style="float:left; margin:0 69px 0 0; width:15px; height:19px; cursor:pointer;"&gt;
          &lt;div id="m2010_box" class="m_box" style="float:left; display:block; position:absolute; width:308px; height:351px; top:20px; margin-left:-37px; color:#ffffff; background:url('images/graph/list_background_left.png'); z-index:2000;"&gt;
              &lt;div class="list_header"&gt;
                  &lt;p&gt;2010&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="items"&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 1
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 2
                  &lt;/div&gt;
                  &lt;div class="list_item"&gt;
                      Milestone 3
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>