Открывающийся по клику блок с текстом

ObjectOne > JavaScript > Открывающийся по клику блок с текстом

Открывающийся по клику блок с текстом

Так же небольшой скрипт для события: Если кликаем вне элемента то блок закрывается. Действует на 1 элемент!

Разворачивание и сворачивание формы jQuery

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="https://objectone.ru/wp-includes/js/jquery/jquery.js"></script>
<style>
	.hide{
	    display: none;
	}
	.block span{
		    text-decoration: underline;
	    text-decoration-color: #137fff;
	    cursor: pointer;
	}
</style>
	</head>
	<body>
	
		<div class="block"><span>Текст</span><div class="hide">Текст который должен раскрыться</div></div>
		<div class="block"><span>Текст</span><div class="hide">Текст который должен раскрыться</div></div>
		<div class="block"><span>Текст</span><div class="hide">Текст который должен раскрыться</div></div>

		<script>
			jQuery(function($) {
	    		$(".block").click(function () {
			      $(".hide",this).toggle(200);
			    });
			});
//Что бы блок закрывался когда кликают вне его. Подвешивать только на 1 элемент
// 	$(document).mouseup(function (e) {
//     var container = $(".block");
//     if (container.has(e.target).length === 0){
//         container.toggle();
//     }
// });
		</script>
	</body>
	</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.hide{

display: none;

}

.block span{

text-decoration: underline;

text-decoration-color: #137fff;

cursor: pointer;

}

</style>

</head>

<body>

<div class="block"><span>Текст</span><div class="hide">Текст который должен раскрыться</div></div>

jQuery(function($) {

$(".block").click(function () {

$(".hide",this).toggle(200);

});

//Что бы блок закрывался когда кликают вне его. Подвешивать только на 1 элемент

// $(document).mouseup(function (e) {

// var container = $(".block");

// if (container.has(e.target).length === 0){

// container.toggle();

// }

// });

</script>

</body>

</html>

Количество просмотров: 5 391

| Категория: JavaScript

« Эффект перспективы