Скрыть/показать элемент по клику JQuery

Сегодня мы поговорим с вами о том, как можно по клику скрыть элемент. Или по клику показать его. Или по первому клику - скрыть, а по второму клику - показать. В общем, я думаю, вы поняли о чем я говорю. Нечто подобное было описано в этой статье.

Но сегодня все будет не так. Эффект будет тот же, но скрываться будет быстро, мгновенно, а не плавно. Для этого создадим всю ту же разметку:

<div class="block">
	<h1 class="extremum-click">Чайники</h1>
	<div class="extremum-slide">
	Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник.
	</div>
</div>

Теперь пропишем стили. По умолчанию блок с текстом скрыт. Добавим немного визуальных эффектов и, самое главное, - мы слегка усовершенствуем скрипт. По клику на заголовке будем выделять его цветом. Вот стили:

.extremum-slide {
	border:1px solid;
	padding:50px;
	display:none;
}
.red {
	background-color:red;
}

Теперь сам скрипт, который все это дело оживите:

$(document).ready(function() {
	$('.block').on('click', '.extremum-click', function() {
		$(this).toggleClass('red').siblings('.extremum-slide').slideToggle(0);
	});
});

Вот собственно и все - можно наслаждаться результатом. Особо рассказывать нечего: нажимаем на заголовок .extremum-click, показывается текст .extremum-slide и одновременно выделяется все тот же заголовок. При следующем клике по заголовку - блок с текстом исчезает.

Весь код страницы:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.extremum-slide {
	border:1px solid;
	padding:50px;
	display:none;
}
.red {
	background-color:red;
}
</style>
<script>
$(document).ready(function() {
	$('.block').on('click', '.extremum-click', function() {
		$(this).toggleClass('red').siblings('.extremum-slide').slideToggle(0);
	});
});
</script>
</head>
<body>
<div class="block">
	<h1 class="extremum-click">Чайники</h1>
	<div class="extremum-slide">
	Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник.
	</div>
</div>
<div class="block">
	<h1 class="extremum-click">Чайники</h1>
	<div class="extremum-slide">
	Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник.
	</div>
</div>
<div class="block">
	<h1 class="extremum-click">Чайники</h1>
	<div class="extremum-slide">
	Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник.
	</div>
</div>
</body>
</html>

04.04.17

Ссылка на статью:

https://webkab.ru/skrytpokazat-element-po-kliku-jquery/