Как сделать раскрывающийся текст
- Использование пользовательской функции на языке JavaScript
- <script>function swap(id) {}</script>
- Изменение состояния блока текста
- sDisplay = document.getElementById(id).style.display;
- Изменение свойства display блока текста
- Добавление стилей для правильного отображения ссылок
- <style type="text/css"> a {cursor: pointer} </style>
- Добавление ссылок-переключателей и скрытых блоков текста
- Создание текстовых блоков
Размещение скрытых блоков текста для улучшения визуального восприятия страницы веб-сайта
Размещение скрытых блоков текста на веб-странице может значительно улучшить визуальное восприятие сайта. Это позволяет загружать страницу в браузере в точно таком виде, каким ее задумал дизайнер, независимо от объема информации. Кроме того, такое размещение блоков текста упрощает поиску нужной информации, поскольку посетителю не нужно просматривать весь объем информации, а только небольшие фрагменты.
Использование пользовательской функции на языке 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 в обеих ссылках.
