Search code examples
javascriptjqueryhtmlonclickchildren

Jquery on click one sub element toggle another sub element of same div

I am having the below code and have multiple parent divs on same page.

<div class="full-width" id="edit">
   <img id="edit-click" class="responsive" src="./images/icon.png">
   <div id="editable" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit">
   <img id="edit-click" class="responsive" src="./images/icon.png">
   <div id="editable" class="editable"> 2 </div>
</div>

What I want to achieve is : on clicking the image(#edit-click) the sub element (#editable) div should open up only for that particular parent div.

How can I achieve this.. ?

I am trying this

$('#edit').on('click', '#edit-click', function (e) {
   $(this).children('#editable').fadeIn( "slow");
});

but this is not targetting the #editable div of the same parent div :(

Any help will be appreciated.

Thanks!

Solution

  • Id must be unique insetad take class as selector

    Like this

    $(".full-width").on("click", ".responsive", function() {
  $(this).siblings(".editable").fadeIn("slow");
})