Вам понадобится
- Базовые знания языков HTML и JavaScript.
Инструкция
1
Используйте пользовательскую функцию на языке JavaScript, чтобы организовать в HTML-странице сокрытие и отображение нужных блоков текста. Общая для всех блоков функция намного удобнее, чем добавление кода к каждому из них по отдельности. В заголовочную часть исходного кода страницы поместите открывающий и закрывающий теги script, а между ними создайте пустую пока функцию с названием, например, swap и одним обязательным входным параметром id:<script>function swap(id) {}</script>
2
Добавьте две строки JavaScript-кода в тело функции - между фигурными скобками. Первая строка должна считывать текущее состояние блока текста - включена его видимость или выключена. Таких блоков в документе может быть несколько, поэтому каждый должен иметь собственный идентификатор - именно его функция получает в качестве единственного входного параметра id. По этому идентификатору она и разыскивает в документе нужный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;
3
Вторая строка должна менять свойство display нужного блока текста на противоположное - скрывать, если текст видим, и отображать, если скрыт. Это можно делать таким кодом:document.getElementById(id).style.display = sDisplay == 'none' ? '' : 'none';
4
Поместите в заголовочную часть еще и такое описание стилей:<style type="text/css">a {cursor: pointer}</style>Оно понадобится для правильного отображения указателя мыши при наведении курсора на неполный тег ссылки. С помощью таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.
5
Разместите в тексте эти ссылки-переключатели перед каждым скрытым блоком, а в блоки - в конце текста - добавьте аналогичную ссылку. Невидимый текст заключите в теги span, у которых в атрибутах style задана невидимость. Например:Раскройте текст <a onclick="swap('hiddenTxt')">+++</a> <span id="hiddenTxt" style="display: none">Это скрытый текст <a onclick="swap('hiddenTxt')">---</a></span>В этом образце щелчок по ссылке из трех плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, который нужно сделать видимым. А внутрь блока помещена ссылка из трех минусов с такими же функциями - щелчок по ней будет скрывать текст.
6
Создайте нужное количество текстовых блоков, аналогичных описанному в предыдущем шаге, не забывая при этом менять идентификаторы в атрибуте id тега span и в переменной, передаваемой функции по событию onClick в двух ссылках.