Простой спойлер на 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”
Оставить комментарий
- Перенести ли домены с Рег.ру на Бегет? спросил (а) Виктор
- RuCaptcha bot и бан по IP спросил (а) Родмик
- MySQL запрос с несколькими JOIN спросил (а) Александр
- MySQL выбрать данные из двух таблиц спросил (а) Виталий
- Редирект при переносе сайта на WordPress спросил (а) Николай
- Интеграция сайта со СДЭК по API к записи
- Интеграция сайта со СДЭК по API к записи
- PHP. Кириллица в регулярных выражениях к записи
- Скрипт постраничной навигации (расширенная версия) к записи
- Прогон сайта по профилям, стоит ли? к записи
- Парсинг телефонов с Авито к записи
- Прогон сайта по профилям, стоит ли? к записи
Archive
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (37)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Март 2016 (1)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (42)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (8)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Регистрация программы для ЭВМ или базы данных в Роспатенте 27.12.2020
- Парсер для форума XenForo 22.12.2020
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей 18.12.2020
- PHP скрипт для проведения акций с призами на сайте(автоматизированный маркетинг) 16.12.2020
- Скрипт калькулятора емкости HDD для видеонаблюдения 03.12.2020


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