Javascript-форум - Разворачивающийся и сворачивающийся текст

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Разворачивающийся и сворачивающийся текст (https://javascript.ru/forum/dom-window/30715-razvorachivayushhijjsya-i-svorachivayushhijjsya-tekst.html)

Разворачивающийся и сворачивающийся текст

Здравствуйте! Пожалуйста помогите!!! Я начинающий и не могу найти как сделать разворачивающийся и сворачивающийся по клику текст. Например, как на сайте MTS... Вложение 1400 Вложение 1401Заранее большое спасибо!!!

Погугли "spoiler javascript"

Phil_F,

<html>
<head>
<style>
ul.list_img {
	list-style-image: url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/bullet.png);
	line-height: 170%;
}
ul.list_img li {
	cursor: pointer;
}
ul.list_imgs {
	list-style: none none;
	display: none;
}
</style>
</head>
<body>
<ul class="list_img" id="ul">
<li class="c1">Спец.предложения для тарифов</li>
<ul id="c1" class="list_imgs">
<li>1</li>
</ul>
<li class="c2">Подключить/отключить</li>
<ul id="c2" class="list_imgs">
<li>2</li>
</ul>
<li class="c3">Авто.инфо</li>
<ul id="c3" class="list_imgs">
<li>3</li>
</ul>
<li class="c4">Условия предоставления</li>
<ul id="c4" class="list_imgs">
<li>4</li>
</ul>
</ul>
<script>
window.onload = function () {
	document.getElementById("ul").onclick = function a(e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.tagName == "LI") {
			document.getElementById(target.className).style.display = document.getElementById(target.className).style.display == "block" ? "none" : "block";
			target.style.listStyleImage = document.getElementById(target.className).style.display == "block" ? "url(http://yandex.st/share/static/b-share-popup_down__tail.png)" : "url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/bullet.png)";
			//alert("v");
		}
	}
}
</script>
</body>
</html>

Цитата:

Сообщение от lord2kim (Сообщение 197255)

Phil_F,

<html>
<head>
<style>
ul.list_img {
	list-style-image: url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/bullet.png);
	line-height: 170%;
}
ul.list_img li {
	cursor: pointer;
}
ul.list_imgs {
	list-style: none none;
	display: none;
}
</style>
</head>
<body>
<ul class="list_img" id="ul">
<li class="c1">Спец.предложения для тарифов</li>
<ul id="c1" class="list_imgs">
<li>1</li>
</ul>
<li class="c2">Подключить/отключить</li>
<ul id="c2" class="list_imgs">
<li>2</li>
</ul>
<li class="c3">Авто.инфо</li>
<ul id="c3" class="list_imgs">
<li>3</li>
</ul>
<li class="c4">Условия предоставления</li>
<ul id="c4" class="list_imgs">
<li>4</li>
</ul>
</ul>
<script>
window.onload = function () {
	document.getElementById("ul").onclick = function a(e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.tagName == "LI") {
			document.getElementById(target.className).style.display = document.getElementById(target.className).style.display == "block" ? "none" : "block";
			target.style.listStyleImage = document.getElementById(target.className).style.display == "block" ? "url(http://yandex.st/share/static/b-share-popup_down__tail.png)" : "url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/bullet.png)";
			//alert("v");
		}
	}
}
</script>
</body>
</html>

Большое спасибо!!! ))) А можно ещё вопросик? Как сделать тоже самое только при нажатии кнопки открывается скрытый текст?

Цитата:

Сообщение от Phil_F

Как сделать тоже самое только при нажатии кнопки открывается скрытый текст?

Пора уже самому делать тестовый пример. На нем и покажем...

Phil_F, аналогично...создаете невидимый блок (display: none) с текстом, а к кнопке привязываете функцию, которая будет показывать/скрывать данный блок (display: block/none)...

Плавное разворачивание и сворачивание скрытого текста

А можно как то сделать в этом коде, что бы было плавное разворачивание и сворачивание скрытого текста?