CODEWITHSUNDEEP
javascriptjquery
jimmyjambles
jimmyjambles

Reputation: 1670

Element targeting in jquery

I have an element that I am using as an expander. When I click on it uses the toggle function to show/hide the expander-container element.

<script type="text/javascript">
$(document).ready(function () {
    $(".expand-icon").click(function () {
        $(".expander-container").toggle(500);
    });
});


<img class="expand-icon" src="./Content/Icons/toggle-expand-icon.png" alt="some_text" />
<div class="expander-container" >
 ... 
</div>

How can I target only the next occurence of the expander-container element without targeting all of them on the page?

Upvotes: 0

Views: 53

Answers (2)

Nishu Tayal
Nishu Tayal

Reputation: 20830

Use .next()

$(document).ready(function () {
    $(".expand-icon").click(function () {
        $(this).next(".expander-container").toggle(500);
    });
});

Here is the working demo : http://jsfiddle.net/XLNM5/

Upvotes: 1

Mithun Satheesh
Mithun Satheesh

Reputation: 27845

I think you should go for go for

$(".expand-icon").click(function () {
    $(this).next('.expander-container').toggle(500);
});

Upvotes: 2

Related Questions