Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Я думаю, вы видели на некоторых сайтах, что некоторая часть текста изначальна невидима и только при клике на текстовую ссылку «Подробнее…», «Развернуть» или «Показать/скрыть» появляется скрытая часть текста. Это иногда удобно для навигации по тексту, если он очень большой и некоторую часть/части текста можно и даже нужно скрыть. В любом случае пользователь в любой момент может развернуть скрытый текст и прочесть его. Таким же образом можно скрыть не только текст, но и различные изображения, картинки.

Скажу по секрету, что некоторые SEO-шники таким образом скрывают текст для продвижения сайта под ссылкой простой точки, ведь этот текст предназначен для поисковиков, а не для людей, но не будем о грустном...

Раскрывающийся текст 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><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №3
</span><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>

Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block.


Вот и всё! В любом случае, если возникнут вопросы — пишите, буду рада помочь!


Посмотреть напутствие!

Удачи вам в этом порой нелегком деле веб-строительства, достижения всех поставленных целей, выполнения заданий в срок, постоянного совершенствования и крепкого здоровья!