title: Hide all other sibling div onclick
body: <p>In my page there are lists like what is given below.    </p>
  
  <pre><code>&lt;li class="select"&gt;
    &lt;div class="type"&gt;&lt;span class="icon_word_small bgpos"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="docu"&gt; &lt;span class="fade"&gt;&lt;a href=""&gt;Study on Clinical Research Market in AMEA&lt;/a&gt; / 24 July 2011&lt;/span&gt;&lt;/div&gt;
    &lt;div class="colu"&gt; &lt;span class="fade"&gt;&lt;a href=""&gt;Fairleign&lt;/a&gt;, &lt;a href=""&gt;Felder&lt;/a&gt; &amp; 2 more&lt;/span&gt;&lt;/div&gt;
    &lt;div class="status"&gt;&lt;span class="fade"&gt;&lt;span class="dark"&gt;Public&lt;/span&gt; [2 Views 1 Downloads]&lt;/span&gt;&lt;/div&gt;
    &lt;div class="data_options"&gt;&lt;a href="#" class="itemDelete"&gt;DELETE&lt;/a&gt; &lt;/div&gt; &lt;!-- row hover options here--&gt;
        &lt;!-- popup starts here--&gt;
      &lt;div class="data_popup data_delete"&gt;&lt;span class="tip"&gt;&lt;/span&gt;Are you sure want to delete this file?
      &lt;div class="cfix"&gt;&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="deletebutton"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;No,Keep this file&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
          &lt;!-- popup ends here--&gt; 
    &lt;div class="cfix"&gt;&lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li&gt;
    &lt;div class="type"&gt;&lt;span class="icon_word_small bgpos"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="docu"&gt; &lt;span class="fade"&gt;&lt;a href=""&gt;Study on Clinical Research Market in AMEA&lt;/a&gt; / 24 July 2011&lt;/span&gt;&lt;/div&gt;
    &lt;div class="colu"&gt; &lt;span class="fade"&gt;&lt;a href=""&gt;Fairleign&lt;/a&gt;, &lt;a href=""&gt;Felder&lt;/a&gt; &amp; 2 more&lt;/span&gt;&lt;/div&gt;
    &lt;div class="status"&gt;&lt;span class="fade"&gt;&lt;span class="dark"&gt;Public&lt;/span&gt; [2 Views 1 Downloads]&lt;/span&gt;&lt;/div&gt;
  
    &lt;div class="data_options"&gt;&lt;a href="#" class="itemShare"&gt;SHARE&lt;/a&gt;&lt;/div&gt;  &lt;!-- row hover options here--&gt;
      &lt;!-- popup starts here--&gt;
     &lt;div class="data_popup data_share"&gt;&lt;span class="tip"&gt;&lt;/span&gt;&lt;h3&gt;Share&lt;/h3&gt;
     &lt;br&gt;
    &lt;p&gt; &lt;input type="checkbox" /&gt; All in our Company&lt;/p&gt;
       &lt;p&gt; &lt;input type="checkbox" /&gt; All in Department&lt;/p&gt;
             &lt;p&gt; &lt;input type="checkbox" id="sharetick"/&gt; Shared with Specific People&lt;/p&gt;
             &lt;div id="textareamsg1"&gt;&lt;p&gt;&lt;textarea class="resizable" id=""&gt;&lt;/textarea&gt;&lt;/p&gt; &lt;/div&gt;
             &lt;p&gt; &lt;input type="checkbox" id="nonsharetick"/&gt; Do not share with specific people&lt;/p&gt;
               &lt;div id="textareamsg2"&gt;&lt;p&gt;&lt;textarea class="resizable dark" name="textarea" id="" placeholder="Type names to share document, to share with 
  many seperate names with commas"&gt;&lt;/textarea&gt;&lt;/p&gt;&lt;/div&gt;
  
      &lt;div class="cfix"&gt;&lt;/div&gt;
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="okbutton"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Cancel&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
        &lt;!-- popup ends here--&gt;
    &lt;div class="cfix"&gt;&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I'm using this to show/hide div.dataDelete, itemShare</p>
  
  <pre><code>$('.itemDelete').live('click', function() {
      $(this).closest("li").find('.data_delete').slideToggle('medium');
  });
  
  $('.itemShare').live('click', function() {
      $(this).closest("li").find('.data_delete').slideToggle('medium');
  });
  </code></pre>
  
  <p>on clicking any other links, i need to hide all other open divs( both itemDelete and itemShare). Also I have a doubt in the above code. My client says it is toggling twice sometimes.. I did not experience that in any browsers. Is there any chance that this could occur with the code above or is he coded that wrongly? </p>