Несколько экземпляров SlideToggle, которые переключают все

Question

У меня есть следующий скрипт, который появляется несколько раз на моей странице. У меня есть простой переключатель слайдов, прикрепленный к <div class="info"> и обрабатываемый тегом <a rel="viewinfo">, но когда я нажимаю на привязку, все divs с информацией о слайде.

здесь является HTML/PHP

<div class="couplistMeta"> 
    <a class='view' rel="viewinfo" href="#">View Coupon</a> 
    <a class="print" href="#">Print</a> 
</div> 
<div class="info"> 
    <p><?php echo $rec2[4]."&nbsp;&nbsp;--&nbsp;&nbsp;Phone:&nbsp;&nbsp;".$rec2['phone']; ?></p><p><?php echo $rec2['address']."&nbsp;&nbsp;--&nbsp;&nbsp;".$rec2['city'].",&nbsp;".$rec2['state']."&nbsp;".$rec2['zip']; ?></p> 
</div> 

Вот Javascript

$(document).ready(function() { 
    $('div.info').hide(); 
    $("a[rel='viewinfo']").click(function() { 
      $('div.info').slideToggle(400); 
      return false; 
    }); 
}); 

Я попытался с помощью $(this).next('div.info').slideToggle(400);, но это только сломал эффект. Итак, $('div.info') слишком общий, как я могу быть более конкретным с JS?

Answer 1

Попробуйте это:

$(document).ready(function() { 
    $('div.info').hide(); 
    $("a[rel='viewinfo']").click(function() { 
     $(this).parent().next('.info').slideToggle(400); 
     return false; 
    }); 
}); 

Проблема бытия в связи с $('div.info') неявно перебирает все div элементы с классом info на этой странице.