Hiding/showing multiple DIVs

Hiding/showing multiple DIVs

Hello all,

I'm new to jQuery, and I'm having issues with showing my DIVs correctly. The problem with the script at the moment, is that it currently opens up every single .display div, whereas I only want it to open up the one which corresponds to the .input a.edit which I've clicked.

The script hides them individually, displays the hide button and makes the show button display correctly like I wish, but it's displaying all the the .display div's at the same time which isn't what I want.


For reference here is my jQuery script:

  1. <script type="text/javascript"> 
  2. $(".input a.edit").click(function () { 
  3. $(this).hide()
  4. $(".hide").show()
  5. $(".display").slideDown('fast'); 
  6. $(this).parents(".pane").fadeOut('fast');
  7. });

  9. $(".input a.hide").click(function () { 
  10. $(".pane").fadeIn('fast')
  11. $(".input a.edit").show(); 
  12. $(this).parents(".display").slideUp('fast'); 
  13. });
  14. </script>

And the HTML (which I've cleaned up to make it more readable):

  1. <div class="input">
  2.       <div class="display">
  3.          <div class="time">(time)</div>
  4.          <a class="hide">Hide</a>
  5.          <div class="fix">(content)</div>
  6.       </div>
  7. <div class="row1">
  8.       <div class="pane">
  9.          (content)
  10.          <a class="edit">Show</a>
  11.          (time)
  12.       </div>
  13. </div>
  14. <hr>

Thanks for any help and suggestions you can provide. :)