title: Multiple divs collapse: close one element if other is open (jQuery)
body: <p>HTML</p>
  
  <pre><code>&lt;ul id="slider"&gt;
  &lt;li&gt;
      &lt;a class="toggle" href="#g1"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g2"&gt;&lt;img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g3"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="toggle" href="#g4"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g5"&gt;&lt;img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g6"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="toggle" href="#g7"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g8"&gt;&lt;img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /&gt;&lt;/a&gt;
      &lt;a class="toggle" href="#g9"&gt;&lt;img src="BLAHBLAH" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="g1" class="gallery"&gt;&lt;p&gt;gallery 1&lt;/p&gt;&lt;/div&gt;
  &lt;div id="g2" class="gallery"&gt;&lt;p&gt;gallery 2&lt;/p&gt;&lt;/div&gt;
  &lt;div id="g3" class="gallery"&gt;&lt;p&gt;gallery 3&lt;/p&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script&gt;
  $('.toggle').click(function() {
      var $toggled = $(this).attr('href');
      $($toggled).siblings(':visible').hide("slide", {direction: 'up'}, 750);
      $($toggled).toggle("slide", {direction: 'up'}, 750);
      return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  .GALLERY { display: none; padding: 50px 20px 20px 20px; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Fiddle:
  <a href="http://jsfiddle.net/jdrVG/" rel="nofollow">http://jsfiddle.net/jdrVG/</a></p>
  
  <p>As title says, how can I close one element if other toggle is clicked?</p>
  
  <p>Thanks in advance :-)</p>