JQuery только для переключения одного элемента без использования идентификаторов

Question

У меня есть несколько div с одним и тем же классом на моей странице.Я хочу иметь возможность переключать их по отдельности.Используя этот скрипт:

 $(document).ready(function() {
   $('.file').hide();

   $('a.toggle').click(function() {
      $('.file').slideToggle(1000);
      $(this).text($(this).text() == 'show' ? 'hide' : 'show');
      return false;
   });
 });

HTML выглядит следующим образом:

<div class="file-wrapper">
 <h5>(<a href="#" class="toggle">show</a>)</h5>
  <div class="file">
   <?php require "lipsum.php"; ?>
  </div><!-- .file -->
</div><!-- .file-wrapper -->

<div class="file-wrapper">
 <h5>(<a href="#" class="toggle">show</a>)</h5>
  <div class="file">
   <?php require "lipsum.php"; ?>
  </div><!-- .file -->
</div><!-- .file-wrapper -->

Теперь, если я нажму на любую из ссылок, это переключит оба элемента на странице (страница в конечном итоге будет иметьдо 10 переключаемых div.Я знаю, что я мог бы просто добавить идентификаторы для каждого div, но я не хочу писать сценарий jquery один раз для каждого id.

Я довольно новичок в jquery, поэтому яЯ уверен, что есть простой способ сделать это. Я пытался использовать .closest ('div'), но это тоже не работает.

Любая помощь?

Answer 1

Может быть, вы могли бы попробовать это:

$(this).parent('h5').next('div.file').slideToggle(1000);

Редактировать: Вот пример: http://jsfiddle.net/6GRJr/

Answer 2

это потому, что он всегда скрывает все ваши div с файлом класса сделай так

$(document).ready(function() {
   $('.file').hide();

   $('a.toggle').click(function() {
      $('div.file', this.parentNode).slideToggle(1000);
      $(this).text($(this).text() == 'show' ? 'hide' : 'show');
      return false;
   });
 });