Выдвигающийся/выпадающий контент

07-24-2008, 07:24 PM

Возник вопрос, не знаю по каким ключевым словам искать.

Допустим страница. В ней со временем набирается много контента, но по-странично не хочется делать.
Пример:

"шапка" сайта
"тело" сайта
"футер" сайта

Где в теле сайта находится контент:
Заголовок1
текст
Заголовок2
текст текст
Заголовок3
текст текст текст

и так далее.

Возник вопрос, возможно ли сделать так, что бы зайдя на эту страницу, были видны только заголовки, а текст был скрыт, и при нажатие на Заголовок1 выдвигался/выпадал контент этого заголовка, и так с каждым заголовком и все на одной странице.

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

Заранее благодарен за ответы, и советы по данной теме.

07-24-2008, 08:19 PM

подсказка:
бб-код - спойлер или офтоп

07-24-2008, 09:17 PM

Это для форума.

П.С.: Нашел вот такое применение.

HTML Code:

<html>
<head></head>
<body>
<a href="#" onclick="document.getElementById('test').style.display='block';"><h2><font color=#feaf00>Заголовок</font></h2></a>
<div style="display:none;" id="test">
<table>
<tr>
<td><img src="images/картинка.png"></td>
</tr>
</table>
</div>
</body>
</html>

Итог - загружается страница, видны толкько заголовки, при нажатии на оные, контент раскрывается(как и хотелось), но обратно не скрывается при повторном нажатии на заголовок.
Каким способом реализовать функцию закрытия на примере данного кода.
Заранее благодарен за ответ.

Shestak добавил 24.07.2008 в 20:24
Нашел другой способ:

HTML Code:

 <span><a href="#" onclick="
obj=this.parentNode.childNodes[1].style; 
tmp=(obj.display!='block') ? 'block' : 'none'; 
obj.display=tmp; 
return false;">Заголовок</a><div class="subblock" style="display: none">
контент</div></span>

07-24-2008, 11:38 PM

Code:

<div>
	<div class="smallfont" style="margin-bottom:2px">
		<b>Читать дальше...&nbsp; </b>
		<input type="button" value="Показать" style="width:70px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = '';this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }">
	</div>
	<div style="display: none;">$text</div>
</div>