Скрипт на открытие/закрытие определенным образом?

Question

[Tigronix]

Приветствую! В js я не силен и нужна ваша помощь, знатоки) Уверен для вас это рядовой случай и много времени не займет...
Сразу гляньте скрин, чтобы было легче понять о чём речь: joxi.ru/8An674gSJy4KAO
Сначала я написал такой код, но быстро понял, что он работает не так, как нужно. Мой код открывает и закрывает все подобные блоки, а их на страничке будет очень много, так как внизу будет пагинация.

$(document).ready(function($){
	$(document).on('click', '.child-open', function(){
		$('.child-block').show();
	});
});
$(document).ready(function($){
	$(document).on('click', '.child-close', function(){
		$('.child-block').hide();
	});
});

В итоге вопрос: Как сделать, чтобы при на нажатии на .child-open открывался только один блок, который находится ниже, и при на нажатии на .child-close скрывался только один .child-block, который был открыт?

Забыл вставить хтмл самих блоков:

<div class="block">
	<div class="head">
		<span class="user"><span class="fa fa-user"></span>Иванов Иван Иванович</span>
		<span class="date"><span>АНО «Пожарные Подмосковья»</span> Дата: 16.07.15</span>
	</div>
	<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</p>
	<div class="switcher child-open">Развернуть <span class="icon-angle-down"></span></div>
</div>
<div class="block child-block">
	<div class="head">
		<span class="user"><span class="fa fa-user"></span>Иванов Иван Иванович</span>
		<span class="date"><span>СТРОЙБЕЗОПАСНОСТЬ</span> Дата: 16.07.15</span>
	</div>
	<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</p>
	<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</p>
	<div class="switcher child-close">Свернуть <span class="icon-angle-up"></span></div>
</div>

Answer 1

[Виталий Инчин ☢]

На подобии этого:

$(".child-open").click(function(){
   $(this).closest(".block").next(".child-block").show();
});
$(".child-close").click(function(){
   $(this).closest(".child-block").hide();
});

Comments

[Tigronix]

Спасибо большое :)

[Алексей Уколов]

Вместо $(this.parentNode) лучше писать $(this).closest('.block') - во-первых, это поможет избежать проблем, если добавятся еще какие-то промежуточные элементы, а во-вторых, не стоит мешать нативный js и jq, лучше все писать в одном стиле.

[Виталий Инчин ☢]

Алексей Уколов: ок