Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2012, 15:16
Интересующийся
Отправить личное сообщение для Phil_F Посмотреть профиль Найти все сообщения от Phil_F
 
Регистрация: 13.08.2012
Сообщений: 20

Разворачивающийся и сворачивающийся текст
Здравствуйте! Пожалуйста помогите!!! Я начинающий и не могу найти как сделать разворачивающийся и сворачивающийся по клику текст. Например, как на сайте MTS... snimok.PNG snimok2.jpgЗаранее большое спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2012, 16:29
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Погугли "spoiler javascript"
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2012, 16:40
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.08.2012, 12:07
Интересующийся
Отправить личное сообщение для Phil_F Посмотреть профиль Найти все сообщения от Phil_F
 
Регистрация: 13.08.2012
Сообщений: 20

Сообщение от lord2kim Посмотреть сообщение
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>
Большое спасибо!!! ))) А можно ещё вопросик? Как сделать тоже самое только при нажатии кнопки открывается скрытый текст?
Ответить с цитированием
  #5 (permalink)  
Старый 14.08.2012, 15:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Phil_F
Как сделать тоже самое только при нажатии кнопки открывается скрытый текст?
Пора уже самому делать тестовый пример. На нем и покажем...
Ответить с цитированием
  #6 (permalink)  
Старый 14.08.2012, 17:42
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Phil_F, аналогично...создаете невидимый блок (display: none) с текстом, а к кнопке привязываете функцию, которая будет показывать/скрывать данный блок (display: block/none)...
Ответить с цитированием
  #7 (permalink)  
Старый 28.04.2014, 23:14
Новичок на форуме
Отправить личное сообщение для shadowmen Посмотреть профиль Найти все сообщения от shadowmen
 
Регистрация: 28.04.2014
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03
lastChild работает в IE, как тут быть? Puaris83 Firefox/Mozilla 4 17.04.2010 23:56
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02