Главная Войти О сайте

Как сделать раскрывающийся текст

Как сделать раскрывающийся текст

Содержание:
  1. Использование пользовательской функции на языке JavaScript
  2. <script>function swap(id) {}</script>
  3. Изменение состояния блока текста
  4. sDisplay = document.getElementById(id).style.display;
  5. Изменение свойства display блока текста
  6. Добавление стилей для правильного отображения ссылок
  7. <style type="text/css"> a {cursor: pointer} </style>
  8. Добавление ссылок-переключателей и скрытых блоков текста
  9. Создание текстовых блоков

Размещение скрытых блоков текста для улучшения визуального восприятия страницы веб-сайта

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

Использование пользовательской функции на языке JavaScript

Для организации скрытия и отображения блоков текста на HTML-странице можно использовать пользовательскую функцию на языке JavaScript. Это гораздо удобнее, чем добавлять код к каждому блоку отдельно. Для этого в заголовочной части исходного кода страницы необходимо добавить открывающий и закрывающий теги script, а между ними создать пустую функцию с названием "swap" и одним обязательным входным параметром "id":

<script>function swap(id) {}</script>

Изменение состояния блока текста

В теле функции "swap" необходимо добавить две строки JavaScript-кода. Первая строка должна считывать текущее состояние блока текста - видим он или скрыт. Каждый блок должен иметь уникальный идентификатор, который передается функции в качестве параметра "id". Затем функция ищет нужный блок в документе и присваивает значение видимости/невидимости (свойство display) переменной "sDisplay":

sDisplay = document.getElementById(id).style.display;

Изменение свойства display блока текста

Вторая строка кода в функции "swap" меняет свойство display блока текста на противоположное - скрывает его, если текст видим, и отображает, если он скрыт. Это достигается следующим кодом:

document.getElementById(id).style.display = sDisplay == 'none' ? '' : 'none';

Добавление стилей для правильного отображения ссылок

Для правильного отображения указателя мыши при наведении на ссылку необходимо добавить следующие стили в заголовочную часть:

<style type="text/css"> a {cursor: pointer} </style>

Добавление ссылок-переключателей и скрытых блоков текста

Для организации переключения видимости/невидимости текстовых блоков необходимо разместить ссылки-переключатели перед каждым скрытым блоком текста. Внутри блока текста также нужно добавить аналогичную ссылку.

Невидимый текст должен быть помещен в теги span с атрибутом style, задающим его невидимость. Например:

Раскройте текст <a onclick="swap('hiddenTxt')">+++</a> <span id="hiddenTxt" style="display: none">Это скрытый текст <a onclick="swap('hiddenTxt')">---</a></span>

При щелчке по ссылке с тремя плюсами вызывается функция "swap" по событию onClick, передавая ей идентификатор блока, который нужно сделать видимым. Внутри блока также размещается ссылка с тремя минусами, вызывающая ту же функцию для скрытия текста.

Создание текстовых блоков

Необходимо создать необходимое количество текстовых блоков, аналогичных описанному выше. При этом необходимо изменять идентификаторы в атрибуте id тега span и в переменной, передаваемой функции "swap" по событию onClick в обеих ссылках.


4Java.ru