Nonsono Statoio
Nonsono Statoio

Reputation: 111

do an event only on element clicked same class

i wonder if it is possible to do an event only on the element clicked, although this element have the same class, and if inside or next to this element there is a div with the class 'subcategory', show it using toggleClass method. here the html.

<ul>
    <li class="catname">something</li>
    <li class="catname">
       something
      <div class="subcategory none">some hidden content to show</div>
    </li>
    <li class="catname">something</li>
</ul>

This is what I tried:

$(document).on("click",".catname", function (event) { 
    $(".subcategory").next().toggleClass('none') 
});

Also this:

$(".catname").bind("click", function() {
    $(".subcategory").next().toggleClass('none')
});

Thank you

Upvotes: 2

Views: 2741

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

You should use the this keyword within the click handler to reference the element which raised the event. From there you can traverse the DOM to find() the inner element. Try this:

$(document).on('click', '.catname', function (event) { 
    $(this).find('.subcategory').toggleClass('none');
});

Example fiddle

Upvotes: 2

Related Questions