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

Question

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

- это 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 на странице.