CODEWITHSUNDEEP
jquery
Olivera Kovacevic
Olivera Kovacevic

Reputation: 717

Slide down only one instance when multiple ones have same class

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

Upvotes: 2

Views: 5082

Answers (2)

Codegiant
Codegiant

Reputation: 2150

Try this

JS CODE

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

});

LIVE DEMO

Upvotes: 1

voigtan
voigtan

Reputation: 9031

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.

Upvotes: 2

Related Questions