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

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

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

Данный код помещаете в нужное для вас место на вашей странице, где вы хотите разместить данную информацию.
htmlCOPY
<!-- Первый блок --> <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-ой вариант

Ссылка на файл: скачать архив

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

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

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

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

Ссылка на файл: скачать архив
Дата публикации: 28.06.2018
Комментарии
Вадим
11 июля 2018 12:22
Вадим
Здравствуйте!
На странице нужно разместить три таких скрипта скрытого текста из первого варианта. Скрипт первого блока разместил перед </body>.
Скрипт второго блока разместил в трех местах на одной странице, с изменением var.
Получилось var, var002, var003. Первый скрипт работает, два других - нет.
Почему, не скажите?
Admin
11 июля 2018 15:08
Admin
Здравствуйте!
Покажите пожалуйста, где у меня написано, что первый блок с кодом нужно размещать в любом месте перед </body>?
Вадим
11 июля 2018 18:46
Вадим
Понял и ошибку нашел. Вроде мелочь, а скрипт не работал. Сейчас хорошо.
Спасибо.
Ольга
12 июля 2018 07:30
Ольга
Большое спасибо за помощь!
Скрипт скрытый текст очень помог с расписанием уроков на сайте.
Ирина
12 июля 2018 19:48
Ирина
Добрый вечер!
Помогите, пожалуйста! Очень очень нужно!!!
Подскажите, как в первом примере убрать кнопку Читать далее, если текст раскрылся?
Admin
12 июля 2018 22:06
Admin
Добрый вечер!
Для этих целей ( скрытие кнопки, ссылки при открытом тексте ) существует второй вариант скрипта скрытый текст.
Nika
13 июля 2018 09:47
Nika
Здравствуйте.
А в данных примерах можно заменить текст читать далее и закрыть на иконки например?
Admin
13 июля 2018 11:10
Admin
Здравствуйте!
Разумеется можно!
В скрипте скрытый текст вместо текста читать далее ... пропишите код картинки:
htmlCOPY
<img src="путь к картинке" alt="" />
Если это иконка от Бутстрап и т.п., то прописывайте нужный для неё код таким же образом ( вместо картинки ).
Сара
24 июня 2018 16:05
Сара
3 вариант рулит )))
Спасибо за подборку скриптов скрытого текста и за толковые разъяснения )))
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!