Multiple instances of SlideToggle which toggle everything.

Question

I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.

here is the 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>

Here is the Javascript

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

I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?

Answer 1

Try this:

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

The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.