Question

I have multiple products on the page all being pulled in through database.
Under each I have a comment box that I want to show and hide by clicking the comment button.

My Javascript:

$(document).ready(function(){

    $("#product-box div#product-comment-box").hide();
    //$("#product-box div.comment").show();

$("#product-box div.comment").click(function(){
    $("li div#product-comment-box").toggle();
}); 

My HTML of a Product Area:

<li><div id="product-box">
    <div id="product-image"><a href="#"><img src="images/image_2.jpg"></a></div>
    <div id="product-controls">
        <a href="#"><div id="button" class="more"><p>More</p></div></a>
        <a href="#"><div id="button" class="add"><p>Add</p></div></a>
        <div id="button" class="comment"><p>Comment</p></div>
        <a href="#"><div id="button" class="like"><p>Like</p></div></a>
    </div>
    <p>Product Name</p>
    <div id="product-comment-box">Comment</div>
    </div></li>

But this is managing to toggle all comment boxes on every product, how do I separate these the best? I tried using next and nextAll, but with no luck.

Thanks

Answer 1

You must use this to reference the current comment. Remember what the selector is doing, getting everything in DOM that matches.

$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div#product-comment-box').toggle();
}); 

Although selecting by id does not seem like a good idea. Try giving that div a class and selecting by that instead.

//Change
<div id="product-comment-box">Comment</div>

//To
<div class="product-comment-box">Comment</div>  

//then select using class instead.
$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div.product-comment-box').toggle();
});