simplest way to show/hide div that shares classes with other divs using jquery

Question

say my code goes something like:

<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 the css being:

.content { display:none; }

but when i click one of the .click, i'd only like the .content below it to show. what's the easiest, most simplest way to do so using jquery? thanks in advance.

Answer 1

Just bind click event and use any relevant transversal method, e.g:

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

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

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