Простой спойлер на JavaScript

Author Автор: Роман Чернышов    Опубликовано: 10 октября 2010

спойлер на js и cssСегодня я опишу пример создания простого спойлера с использованием JavaScript. Для тех кто не в курсе, спойлер(Spoiler) — это своеобразный способ скрытия информации на странице сайта от посторонних глаз, либо же просто для более компактного распределения контента на странице в целом. Спойлер раскрывается при нажатии на соответствующую ссылку(кнопку) и так же закрывается. Всего в один клик, что разумеется очень удобно. Пример использования такого решения очень часто можно встретить на различных форумах, интернет-магазинах(дополнительная информация о товаре), каталогах и т.д.

Что можно скрыть с помощью спойлера? Да практически все, любой материал, будь то: — текст, изображения или даже видеоролик.

И так для реализации задуманного вставим в код своей страницы следующий скрипт на джаваскрипт:

function spoiler(id)
{
var obj = "";
// Проверить совместимость браузера
if(document.getElementById)
obj = document.getElementById(id).style;
else if(document.all)
obj = document.all[id];
else if(document.layers)
obj = document.layers[id];
else
return 1;
// Пошла магия
if(obj.display == "")
obj.display = "none";
else if(obj.display != "none")
obj.display = "none";
else
obj.display = "block";
}

Для того, что бы содержимое спойлера не было видно при открытии страницы, а открывалось только при нажатии на ссылку, его нужно спрятать, сделаем мы это с помощью стилей:

#content {
display:none;
background: #888444;
width: 500px;
}

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

<a href="javascript://" onClick="spoiler('content');">Спойлер...</a>
<div id="content">
содержимое
</div>

Внутри спойлера может находиться, как я уже написал выше, абсолютно всё! В том числе и дополнительные вкладки(вложенные спойлеры), скрытые таким же методом. По такому принципу можно даже организовать сложную системы зависимых форм, где при выборе определенного пункта, будет отображаться соответствующая информация, но это уже фантазии, т.к. для этого есть, хоть и сложные, но другие более удобные решения.

2 комментария to “Простой спойлер на JavaScript”

  • имя 08.08.2012 в 9:08 пп

    по моему слишком просто — будет «ломать» дизайн — со стилями надо поиграться.

  • Алексей 28.10.2015 в 12:38 дп

    Спасибо, добрый человек.
    Очень помогло.
    просто четко и понятно. и работает.
    2 мешка респектов.

Оставить комментарий на имя

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка