Question

I need to have numerous elements with the SAME class, and content inside them that shows on click, but right now since all of them have the same class, all of them open at once.

How can I make it so that only the clicked one opens up and not others?

My HTML:

<div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>
    <div class="product">
    <p><a href="#">click</a></p>

    <div class="product_inner">
    <p>show me</p>
    </div>

</div>

JQuery:

$(document).ready(function() {
$('.product p a').click(function() {
$('.product_inner').slideToggle(300);
}); // end click

}); // end ready

Answer 1

when you do a selector you will find all the elements in your document what you want is to find the element you actually want to work with:

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .parent() // p
                .next() // find the next element from <p> (.product_inner) 
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

or another approach:

$(document).ready(function() {
    $('.product p a').click(function() {
        $(this) // the current a-element that was clicked
            .closest('.product') // .product
                .find('.product_inner') // find .product_inner inside .product
                    .stop() // stop animation
                    .slideToggle(300); // Slide toggle
    }); // end click

}); // end ready

if you have another html-markup.