The easiest way to show / hide a div that shares classes with other divs using jquery

Question

Say my code looks something like this:

<div class="click">click</div> <div class="something">sth</div> <div class="container"><div class="content">content 01</div></div> <div class="click">click</div> <div class="something">sth</div> <div class="container"><div class="content">content 02</div></div> 

with css:

 .content { display:none; } 

but when I click one of .click , I would like .content display it below. what is the easiest and easiest way to do this with jquery? thanks in advance.

Answer 1

Just bind the click event and use any appropriate transversal method, for example:

 $('.click').on('click', function(){ $(this).nextAll('.container').first().children('.content').show(); }); 

Now the easiest way is to wrap all the relevant concrete elements inside a common container / wrapper element, and then use:

 $(this).closest('.wrapper').find('.content').show();