Бесплатное в сети!
» » Скрипт скрытый текст на сайте

Скрипт скрытый текст на сайте

скрипт скрытый текст

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

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

Первый вариант скрипта скрытый текст.

Данный код помещаете в нужное для вас место на вашей странице, где вы хотите разместить данную информацию.

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

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

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

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


Второй вариант скрипта скрытый текст.

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

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

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

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

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

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

  Скачать скрипт скрытый текст 2-ой вариант

Ссылка на файл: skrytyi_text_2.zip

Третий вариант скрипта скрытый текст

Это мой самый любимый вариант скрипта скрытого текста, где скрытая часть плавно раскрывается и закрывается.

Важно !
Особенностью этого скрипта скрытого текста является то, что он скрывает всю информацию находящуюся после первого параграфа.
Поэтому необходимо тег <p> ... </p> в самом начале прописывать всегда. Количество слов в первом параграфе не учитывается скриптом и вы сами по объёму слов регулируете видимую часть.

  Скачать скрипт скрытый текст 3-ий вариант

Ссылка на файл: skrytyi_text_3.zip

Ну вот в принципе и всё, с чем хотел поделиться в этой статье!


Комментарии 9
Вадим
11 июля 2018 12:22
Вадим

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

Читать полностью
11 июля 2018 15:08
Admin

Вадим,
Здравствуйте!
Покажите пожалуйста, где у меня написано, что первый блок с кодом нужно размещать в любом месте перед </body>?

Читать полностью
Вадим
11 июля 2018 18:46
Вадим

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

Читать полностью
Ольга
12 июля 2018 07:30
Ольга

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

Читать полностью
Ирина
12 июля 2018 19:48
Ирина

Добрый вечер!
Помогите, пожалуйста! Очень очень нужно!!!
Подскажите, как в первом примере убрать кнопку "Читать далее ", если текст раскрылся?

Читать полностью
12 июля 2018 22:06
Admin

Ирина,
Добрый вечер!
Для этих целей ( скрытие кнопки, ссылки при открытом тексте ) существует второй вариант скрипта скрытый текст.

Читать полностью
Nika
13 июля 2018 09:47
Nika

Здравствуйте.
А в данных примерах можно заменить текст читать далее и закрыть на иконки например?

Читать полностью
13 июля 2018 11:10
Admin

Nika,
Здравствуйте!
Разумеется можно!
В скрипте скрытый текст вместо текста ( читать далее ... ) пропишите код картинки:

<img src="путь к картинке" alt="" />
-----
Если иконка от Бутстрап и т.п., то прописывайте нужный для неё код таким же образом.

Читать полностью
Сара
13 июля 2018 15:52
Сара

3 вариант рулит )))
Спасибо за подборку скриптов скрытого текста и за толковые разъяснения )))

Читать полностью
Добавить комментарий