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

Author Роман Чернышов    Category JavaScript / jQuery     Tags , Комментариев 2 Дата 10 Окт

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

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

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

<script type="text/javascript">
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";
}
</script>

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

<style media="screen,projection" type="text/css">
#content {
display:none;
background: #888444;
width: 500px;
}
</style>

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

<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 мешка респектов.

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

На страницах моего блога вы найдете множество информации о программировании, о появлении новых разработок, сможете ознакомиться с товарами и услугами которые я предоставляю. А также сможете получить консультацию, заказать разработку сайта или приобрести готовое решение, для реализации собственного проекта.

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы

www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...