Element targeting with jQuery
<p>I am trying to use jQuery to show a div when the user clicks an "a" element. I´m struggling however because I´m not able to target the div precisely. </p>

<p>Looking at the code below, you see that my program lists offers (Offer#1 &amp; Offer#2). Right below the offer div, there is the comments div (where the comments for the offer is shown). The .comment_icon element can be clicked to show/ hide the comments.</p>

<pre><code>&lt;div id="offer"&gt;
Offer#1 goes here
&lt;a href="#" class="comment_icon"&gt;Show comments&lt;/a&gt;
&lt;/div&gt;
&lt;div class="comments"&gt;
Comments for Offer#1 goes here
&lt;/div&gt;

&lt;div id="offer"&gt;
Offer#2 goes here
&lt;a href="#" class="comment_icon"&gt;Show comments&lt;/a&gt;
&lt;/div&gt;
&lt;div class="comments"&gt;
Comments for Offer#2 goes here
&lt;/div&gt;

$('.comment_icon').toggle(
    function() {
        $('.comments').slideDown();
    },
    function() {
        $('.comments').slideUp();
    }
);
</code></pre>

<p>My problem is that when .comment_icon element is clicked, it will show all div´s with the .comments class. However, I just want the one belonging to the respective offer to show when the .comment_icon is clicked. </p>

<p>Is there any way to do this kind of tartgeting?</p>
