Создание скрытого контента

Здравствуйте друзья! Многие из вас должно быть видели на различных сайтах такую интерестную вещь, как скрытый контент, возникающий без перезагрузки страницы при щелчке мышью на каком-либо элементе. Сегодня я расскажу вам как это можно реализовать наиболее простым и элегантным способом.

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

Выглядеть это будет следующим образом:

Нажмите.

или

Управляющий JavaScript код в обоих примерах будет один и тот же:

<script>
function disp( e )
{
document.getElementById(e).style.display = ( document.getElementById(e).style.display != "none") ? "none" : ' ' ;
}
</script>

Если вы изучили мою книгу по JavaScript то тут ничего сложного для вас не будет, но все же для ясности изложения я разберу данный пример на составляющие:

function disp ( e ) {...}- задаем новую функцию с именем disp, которая ожидает переменную e.

document.getElementById(e).style.display - это DOM конструкция языка JavaScript, которая выбирает элемент с заданным ID , далее ищет инструкцию отображения на дисплее для этого элемента.

( document.getElementById(e).style.display != "none") ? "none" : ' ' ; - инструкция выбора 'или'. В общем виде:

a = (условие) ? 'действие_1' : 'действие_2' ; - производится проверка условия и в зависимости от результата выполняется один из операторов 'или' . Если условие верно, то выполняется действие_1, если нет то действие_2.

В нашем случае если параметр отображения элемента на дисплей не равен 'none', то приравняем его к 'none', в противном случае сделаем его пустым значением.

Со скриптом мы разобрались, далее тот контент, который мы хотим скрыть помещаем в контейнер <div>...</div>, которому, в свою очередь присваиваем значение ID и стиль style="display:none". В первом примере это выглядит так:

С этим мы тоже разобрались. Теперь остается только придумать как вызвать наш скрипт для изменения параметра отображения нашего контента. Хитрого и в этом ничего нет, для этого мы используем любой элемент с атрибутом OnClick. В моем случае это ссылка <a>...</a> :

<a href="#" onclick="disp('a')" align="center">Нажмите</a>

Проще говоря, браузер перехватывает щелчок мышью по выбранному нами элементу и запускает скрипт для обработки необходимого события.

Ну вот мы и закончили с созданием скрытого контента, который пользователь может открыть (или не открыть) по своему усмотрению. В заключение хочу сказать, что подобный скрипт может принимать неограниченное колличество значений, одновременно изменяя множество элементов страницы. Например можно одновременно показать один элемент и скрыть другой, как это показано во 2м примере. А вот и код из второго примера: