Авторизация

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

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

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

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


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

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

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>

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

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

Примеры работы скрытого текста 1-го варианта

Первый пример работы

Начало текста, - каждый пишет что угодно и по количеству слов сколько угодно.

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

Второй пример работы

Это второй пример безупречной работы скрипта скрытый текст.

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



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

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

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

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

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

Примеры работы скрытого текста 2-го варианта

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

Читать далее

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

Читать далее

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


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

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



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

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

Примеры работы скрытого текста 3-го варианта

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

ночоной город

А вот после вы можете прописать любую другую текстовую информацию, вставить картинку, видео и так далее.

Сколько можно прописать код скрытого текста на одной странице: не ограниченное количество, и при этом ничего не изменяя и не дополняя.


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

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

Рейтинг: 4.5/5     Оценили: 28

Рекомендую почитать

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

Вадим

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

Админ

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

Специально для вас я добавил ещё 1 пример в 1-ом варианте, и как видите все работают исправно.
Если сами не разобрались - не получилось найти ошибку, пришлите мне ваш весь код страницы (в формате TXT) и я укажу вам вашу ошибку, либо просто пришлите адрес вашей страницы, где установлен этот скрипт.

Вадим

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

Сергей

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

Ольга

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

Ирина

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

Админ

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

Nika

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

Админ

User: Админ→ Nika
Здравствуйте!
Разумеется можно!
В скрипте скрытый текст вместо текста ( читать далее ... ) пропишите код картинки:
<img src="путь к картинке" alt="" />
-----
Если иконка от Бутстрап и т.п., то прописывайте нужный для неё код таким же образом.

Сара

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