Раскрывающийся текст HTML
Раскрывающийся текст HTML
Тегов HTML, которые смогли бы развернуть при необходимости и показать скрытый текст, пока нет. На форумах в BB-коде в этих целях используется тег [spoiler][/spoiler], но он не работает в HTML.
Для раскрытия текста при клике на текстовую ссылку, нужен скрипт.
Скрипт, раскрывающий текст
Ниже сам скрипт. Так как я знаю, как иной раз тяжело в 3 ночи что-то сообразить и понять элементарные казалось бы вещи или когда не понимаешь вообще о чём речь, но нужно кровь из носа выполнить задуманное, в скрипте подробно описано что где поменять/добавить.
<a href="javascript:sh()">Подробнее... (или любая другая надпись на ссылке, при клике на которую показывается весь скрытый изначально текст)</a><br />
<div id="info" style="padding-top:15px;">
ЗДЕСЬ ПИШЕМ ИЛИ ВСТАВЛЯЕМ ТЕКСТ, КОТОРЫЙ ДОЛЖЕН БЫТЬ ПО УМОЛЧАНИЮ СКРЫТЫМ И ПОКАЗЫВАТЬСЯ (РАСКРЫВАТЬСЯ) ТОЛЬКО ПРИ КЛИКЕ НА ССЫЛКУ "ПОДРОБНЕЕ", СО ВСЕМИ НУЖНЫМИ ТЕГАМИ.
</div>
<script type="text/javascript">
sh();
function sh() {
obj = document.getElementById("info");
if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>
Но этот метод, точнее, скрипт, работает только если вам необходимо скрыть на одной страничке один блок текста. В случаях, когда на одной странице таких скрывающихся блоков текста будет несколько, этот скрипт не подходит. Для этих целей есть другой скрипт, который можно использовать, как для скрытия на одной странице одного, так и нескольких блоков текста или картинок. Скрипт ниже:
Скрипт, раскрывающий несколько блоков текста или картинок на одной странице
<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
//-->
</script>
<p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №1</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №1
</span>
<p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №2</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №2
</span>
Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №3
</span>
Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>
Вот и всё!
|
| Категория: Для сайта | Добавил: PIRAT (19.03.2013)
|
| Просмотров: 26866
| Рейтинг: 4.2/23 |
|
Главная