Question

In my page there are lists like what is given below.

<li class="select">
  <div class="type"><span class="icon_word_small bgpos"></span></div>
  <div class="docu"> <span class="fade"><a href="">Study on Clinical Research Market in AMEA</a> / 24 July 2011</span></div>
  <div class="colu"> <span class="fade"><a href="">Fairleign</a>, <a href="">Felder</a> & 2 more</span></div>
  <div class="status"><span class="fade"><span class="dark">Public</span> [2 Views 1 Downloads]</span></div>
  <div class="data_options"><a href="#" class="itemDelete">DELETE</a> </div> <!-- row hover options here-->
      <!-- popup starts here-->
    <div class="data_popup data_delete"><span class="tip"></span>Are you sure want to delete this file?
    <div class="cfix"></div>
  <ul>
    <li><a href="#" class="deletebutton"></a></li>
    <li><a href="">No,Keep this file</a></li>
  </ul>
  </div>
        <!-- popup ends here--> 
  <div class="cfix"></div>
</li>

<li>
  <div class="type"><span class="icon_word_small bgpos"></span></div>
  <div class="docu"> <span class="fade"><a href="">Study on Clinical Research Market in AMEA</a> / 24 July 2011</span></div>
  <div class="colu"> <span class="fade"><a href="">Fairleign</a>, <a href="">Felder</a> & 2 more</span></div>
  <div class="status"><span class="fade"><span class="dark">Public</span> [2 Views 1 Downloads]</span></div>

  <div class="data_options"><a href="#" class="itemShare">SHARE</a></div>  <!-- row hover options here-->
    <!-- popup starts here-->
   <div class="data_popup data_share"><span class="tip"></span><h3>Share</h3>
   <br>
  <p> <input type="checkbox" /> All in our Company</p>
     <p> <input type="checkbox" /> All in Department</p>
           <p> <input type="checkbox" id="sharetick"/> Shared with Specific People</p>
           <div id="textareamsg1"><p><textarea class="resizable" id=""></textarea></p> </div>
           <p> <input type="checkbox" id="nonsharetick"/> Do not share with specific people</p>
             <div id="textareamsg2"><p><textarea class="resizable dark" name="textarea" id="" placeholder="Type names to share document, to share with 
many seperate names with commas"></textarea></p></div>

    <div class="cfix"></div>

  <ul>
    <li><a href="#" class="okbutton"></a></li>
    <li><a href="">Cancel</a></li>
  </ul>
  </div>
      <!-- popup ends here-->
  <div class="cfix"></div>
</li>

I’m using this to show/hide div.dataDelete, itemShare

$('.itemDelete').live('click', function() {
    $(this).closest("li").find('.data_delete').slideToggle('medium');
});

$('.itemShare').live('click', function() {
    $(this).closest("li").find('.data_delete').slideToggle('medium');
});

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?

Answer 1

Do something like:

$(".data_options a").live("click", function(e){
    e.preventDefault();
    $(".data_popup").slideUp();
    $(this).closest(".select").find(".data_popup").stop(true, false).slideDown();
});

The link you are click are both inside: .data_options. So we can use that as a reference, not we find all .data_popup which contains all DIV’s you want to slideUp, except for the current one, you wan’t to slide that one down.

If it toggles twice, it might be bound twice? Or the do a double click instead of a single click. With above code, current item will always go open instead of toggle.