Скрытый текст

ГлавнаяJava скрипты → Скрытый текст

Скрипт Скрытый текст в основном используется при создание сайта с большим объёмом содержания страницы, или для сокрытия определённой информации, которая нужна только заинтересованным пользователям (например: "Наша ссылка - баннер").

Первый вариант

Работу данного скрипта "Скрытый текст" вы можете наблюдать при нажатии на "Читать далее..." чуть ниже описания. Но, хочу сразу предупредить об одном довольно важном моменте - вся информация помещённая в "скрытый текст" не читается роботами-поисковиками, и соответственно не индексируется. Поэтому старайтесь помещать в данный скрипт тот текст, где информация не является особо важной.

HTML-код скрипта Скрытый текст

      <!-- Первый блок  -->
<script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script>

      <!-- Второй блок  -->
<a href="javascript: displ('var')"><b>Читать далее...</b></a>
<div id="var" style="display: none;">
Ваша текстовая информация<br />
<a href="javascript: displ('var')"> <b>Закрыть текст.</b></a>
</div>

Данный код помещаете в нужное для вас место на вашей странице, где вы хотите разместить данную информацию. Если вы хотите использовать на одной странице более одного такого скрипта, то код из первого блока далее прописывать не обязательно, а во втором блоке обязательно сделайте изменения в ('var'), т.е. в первом скрипте можете оставить как есть, а в последующих добавляйте цифры, например: ('var002') и т.д. Только изменения нужно делать во всех ('var') - в каждом коде их по 3-и штуки. Если вы не будете делать эти изменения, то при нажатии одного из скрипта - сработают все. Будьте внимательны!

Первый пример работы скрипта "Скрытый текст"

Читать далее...


Второй пример работы скрипта "Скрытый текст"

Читать далее...




Второй вариант

Рассмотрим другой скрипт работы скрытого текста

Второй пример скрытого текста который помещён в блок со своим классом. К видимой текстовой информации в конце прибавляется многоточие, которое вы можете заменить на другие знаки, просто прописав их в скрипте.

Читать далее

Это второй блок из последнего примера скрытого текста. Кроме текстовой информации, в скрытый текст можно поместить любые элементы: фотографии, видео и прочее, только имейте в виду тот факт, что если вы картинку или видео поставите в самый верх, то скрипт её учитывать не будет, потому как там нет текстовых знаков для подсчёта.

Читать далее

У второго примера есть свои преимущества, и первый из них, - это позволено указывать в скрипте определённое количество знаков для показа видимой области.

Вторым плюсом является сокрытие ссылки Читать далее при её нажатие, то есть у нас всегда отображается только одна ссылка, которая автоматически меняет своё название.

Если ваш текст по количеству знаков не превышает указанное число в скрипте, то и ссылка для показа полного текста отображаться соответственно не будет.

И третье преимущество в том, что для каждого последующего блока со скрытым текстом вам не нужно прописывать дополнительный код, как это в первом примере. Копируете свой блок, меняете текстовую и любую другую информацию, и все они будут работать без взаимодействия друг с другом.

Изменения в скрипте для видимой области

  limit: 250,       // количество знаков в видимой области
  ellipsis: '...',  // отображаемые знаки в конце текста видимой области

Скачать скрипт скрытый текст (2-ой пример)

Похожие статьи:

Поделись ссылкой с друзьями:

Комментарии к статье

Вадим Вадим 07-02-2014

Здравствуйте! На странице нужно разместить три таких скрипта скрытого текста из первого варианта. Скрипт первого блока разместил перед </body>. Скрипт второго блока разместил в трех местах на одной странице, с изменением var. Получилось var, var002, var003. Первый скрипт работает, два других - нет.
Почему?

админ Admin 07-02-2014

Добрый день!
Покажите пожалуйста, где у меня написано, что первый блок с кодом нужно размещать в любом месте перед </body>?
Специально для вас я добавил ещё 1 пример в 1-ом варианте, и как видите все работают исправно. Если сами не разобрались - не получилось найти ошибку, пришлите мне ваш весь код страницы (в формате TXT) и я укажу вам вашу ошибку, либо просто пришлите адрес вашей страницы, где установлен этот скрипт.
e-mail: admin@age-dragon.com

Вадим Вадим 09-02-2014

Ошибку нашел. Вроде мелочь, а скрипт не работал. Сейчас хорошо.
Спасибо.

Cергей Cергей 28-03-2014

Спасибо))
скрипт скрытый текст работает как "часы"

Ольга Ольга 06-11-2014

Большое спасибо за помощь!
Очень помогло с расписанием уроков на сайте.