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

Question

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!

you can make that using classes but don't use same id for more than one element .. you can take a look at my answer — Mohamed-Yousef, Dec 27 '15 at 08:51
I know this is a little bit confused about id must be unique while it can works fine with css .. but you can try click event here it will just work with the first element https://jsfiddle.net/mohamedyousef1980/1vrdbzgL/ — Mohamed-Yousef, Dec 27 '15 at 08:59

score 1 · Accepted Answer · answered Dec 27 '15 at 08:45

1

Id must be unique insetad take class as selector

Like this

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

answered Dec 27 '15 at 08:45

Anik Islam Abhi

25,137
8
58
80

it was not working with .closest. but working fine with .siblings. Thank you! – Jasdeep Singh Dec 27 '15 at 09:47

score 1 · Answer 2 · edited May 23 '17 at 12:23

As I said Id must be unique (I know this is a little bit confused about id must be unique while it can works fine with css .. but you can try click event here it will just work with the first element https://jsfiddle.net/mohamedyousef1980/1vrdbzgL/ and you can take a look at Does ID have to be unique in the whole page?

so your code should be something like this

in html

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

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

in js you need to use .closest() and .find()

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

Working Demo

Additional for fadeToggle you can use

$('.full-width').on('click', '.responsive', function (e) {
   var getEditable = $(this).closest('.full-width').find('.editable');
   $('.editable').not(getEditable).hide();
   getEditable.fadeToggle( "slow");
});

Working Demo

Note: be sure you include jquery

Hey Yousef thanks for adding the unique id part to my knowledge. Appreciate it very much !! — Jasdeep Singh, Dec 27 '15 at 09:48

score 0 · Answer 3 · answered Dec 27 '15 at 08:54

You better do it this way.

<div class="full-width" id="edit1">
   <img class="edit-click responsive" src="http://lorempixel.com/50/50">
   <div id="editable1" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit2">
  <img class="edit-click responsive" src="http://lorempixel.com/50/51">
  <div id="editable2" class="editable"> 2 </div>
</div>

Use classes instead of IDs.

And use CSS classes instead of jQuery fadeIn, fadeOut.

.editable {
   display: none;
} 

.active .editable {
   display: block;
}

https://jsfiddle.net/hje00xyg/

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

I am trying this

3 Answers3