Сейчас: 18:50:08   28-го марта 2024 г.
UsefulScript.ruСкриптыРазныеСкрипт спойлера
147
545

Создаем свой собственный спойлер для сайта

Предлагаем Вам совсем простой и небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.


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


Спойлер (кликните для показа/скрытия)

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

JavaScript код:
<script type="text/javascript">
function 
open_close(id_spol) {
if (
document.getElementByIdobj document.getElementById(id_spol).style;
else if (
document.allobj document.all[id_spol];
else if (
document.layersobj document.layers[id_spol];
else return 
1;

if (
obj.display == ""obj.display "none";
else if (
obj.display != "none"obj.display "none";
else 
obj.display "block";
}
</script>

Далее, в том месте Вашей странички, где Вы планируете использовать спойлер, необходимо добавить следующий код:

HTML код:
<div class="spoiler_style" onClick="open_close('spoiler1')">
 <
b>Спойлер</b> (кликните для показа/скрытия)
</
div>
<
div id="spoiler1" class="spoiler_body" style="display: none;">
 
Здесь содержится все точто должен скрывать спойлер.<br>
 
Может содержаться не только текстно и картинки,<br>
 
таблицы и другие элементы.<br>
 <
img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</
div>

Вместо текстовой надписи "Спойлер (кликните для показа/скрытия)" можно использовать какую-нибудь картинку:

HTML код:
<div class="spoiler_style" onClick="open_close('spoiler1')">
 <
img src="image/spoiler.png" alt="Изображение спойлера" width="200">
</
div>
<
div id="spoiler1" class="spoiler_body" style="display: none;">
 
Здесь содержится все точто должен скрывать спойлер.<br>
 
Может содержаться не только текстно и картинки,<br>
 
таблицы и другие элементы.<br>
 <
img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</
div>

Плюс не забываем добавить стили для наших спойлеров. Для этого добавьте следующий код в шапку сайта между тегами <head> и </head>.

HTML код:
<style type="text/css">
 .
spoiler_style {
    
width300px;
    
padding1px 7px;
    
cursorpointer;
    
background#e7e7e7;
    
border1px solid #4874a3;
    
border-radius3px;
 }
 .
spoiler_body {
    
width480px;
    
padding1px 7px;
    
background#F7F7F7;
    
border1px solid #669966;
 
}
</
style>

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

Дата создания: 15:02:37 06.11.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 34971 раз(а).

Комментарии посетителей (31 шт.):
Вася
8
# 59
(10:42:52  26.01.2012 г.)

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

Administrator
7
# 60
(20:03:39  26.01.2012 г.)

Вася, в функции открытия второго спойлера необходимо заменить onClick="open_close('spoiler1')" на onClick="open_close('spoiler2')".
Также второму спойлеру необходимо дать новое имя - id="spoiler2"
Ответить

Вася
4
# 70
(06:14:37  08.02.2012 г.)

Это-то да, работает. А как чтоб без ручного вмешательства? Зарядил спойлер в новостной скрипт, т.е. каждая новость выводится как спойлер подобный предыдущему и все замыкается...
Ответить

Administrator
3
# 71
(19:54:13  08.02.2012 г.)

Вася, а что мешает добавлять уникальный идентификатор в id спойлера и в событие onClick для каждой новости автоматом?
Берете id темы, которая будет под спойлером (простейшим SELECT-ом) и добавляете его в конец имени спойлера и события onClick. Таким образом, каждый спойлер будет уникальным и соответствовать только своей теме.
Предлагаю дальнейшее общение перенести на наш форум.
Ответить

Женя
0
# 2440
(00:42:40  29.04.2015 г.)

У меня такая же проблема, спойлер один, а новостей в нем же полно, и получается все открываются одинаково, и как быть... Пример кода, пожалуйста, если можно.
Ответить

Костя
3
# 99
(15:55:05  16.03.2012 г.)

Вечер добрый. Как сделать, чтобы спойлер открывался при наведении не него указателя мышки?
Ответить

Administrator
7
# 100
(19:25:44  16.03.2012 г.)

Костя, замените строчку
<div class="spoiler_style" onClick="open_close('spoiler1')">
на такую:
<div class="spoiler_style" onmouseover="open_close('spoiler1')" onmouseout="open_close('spoiler1')"
Ответить

Денис
0
# 165
(19:13:52  27.05.2012 г.)

У меня скрипт работает наоборот: после загрузки страницы он открытый сразу, ну а потом уже все ок. Почему он открытый сразу? Данный код необходимо добавить до первого использования спойлера.
Ответить

Administrator
5
# 166
(19:52:20  27.05.2012 г.)

Денис, вероятнее всего Вы убрали style="display: none;" из строчки:
<div id="spoiler1" class="spoiler_body" style="display: none;">
Ответить

Дмитрий
0
# 167
(21:36:04  27.05.2012 г.)

Добрый вечер, у меня делема, я хочу скрипт спрятать в отдельный файл (.js), а как мне его подгрузить в сам спойлер (2-й вариант)?
Ответить

Administrator
1
# 168
(21:51:43  27.05.2012 г.)

Дмитрий, для загрузки скрипта из отдельного файла (.js) воспользуйтесь кодом:
<script type="text/javascript" src="spoiler.js">
</script>
Где spoiler.js - имя файла с JavaScript кодом.
Данный код необходимо добавить до первого использования спойлера (в любое место странички Вашей странички, желательно ближе к начальному тегу <body>).
Ответить

Миша
0
# 180
(20:20:40  04.06.2012 г.)

Добрый вечер, как сделать так, чтобы открывалось несколько спойлеров по одному идентификатору.
Ответить

Administrator
0
# 181
(20:55:11  04.06.2012 г.)

Миша, могу Вам порекомендовать создать группу спойлеров со схожими именами, отличающимися цифрами (например, spoiler_1 и spoiler_2).
В JavaScript код добавить цикл от 1 до 2 (а еще лучше в виде переменной) который будет добавлять цифры в конец имени спойлера. Для открытия используем имя группы: spoiler_
Ответить

Галина
2
# 211
(08:34:22  11.07.2012 г.)

Здравствуйте. Под спойлером у меня находиться плеер, и при закрытии спойлера звук продолжает проигрываться (возникает необходимость выключать плеер, затем закрывать спойлер). А как сделать, чтобы при закрытии спойлера звук сразу же прекращался?
Ответить

Виктор
-2
# 223
(17:20:33  19.07.2012 г.)

Здравствуйте. Подскажите, что нужно прописать, чтоб спойлер был одного размера до и после открытия.
Как растянуть его по ширине страницы?
Ответить

Administrator
1
# 224
(20:22:01  19.07.2012 г.)

Виктор, внесите изменения в стили .spoiler_style и .spoiler_body путем указания ширины блоков в процентах: width: 100%
Ответить

Владислав
1
# 234
(05:38:11  30.07.2012 г.)

Как сделать прокрутку внутри спойлера? И еще, подскажите, какой параметр отвечает за ширину спойлера? Или это в css уже надо настраивать?
Ответить

Administrator
4
# 235
(19:29:54  30.07.2012 г.)

Владислав, добавьте в стиль .spoiler_body строчки:
height: 100px;
overflow: auto;
где height: 100px - высота, а overflow: auto; отвечает за добавление полос прокрутки при необходимости.
Если нужно задать ширину самого спойлера (по которому кликают), то внесите изменения в стиль .spoiler_style.
Ответить

Алекс
-1
# 266
(07:20:41  17.08.2012 г.)

А как сделать этот скрипт, чтобы заголовок нераскрытого спойлера содержал надпись, например, "Подробнее (показать)", а раскрытого "Подробнее (скрыть)"
Спасибо.
Ответить

Administrator
0
# 267
(21:07:39  17.08.2012 г.)

Алекс, ответил Вам на форуме в данной теме, чтобы не запихивать все в комментарии (может еще вопросы появятся).
Ответить

Максим
2
# 288
(23:30:06  06.09.2012 г.)

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

Administrator
2
# 294
(19:07:33  09.09.2012 г.)

Максим, есть изящный вариант с использованием jQuery. Для этого до нашего JavaScript кода необходимо подключить jQuery: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
и перед var obj = ""; добавить следующее: $("div[id^='spoiler']").hide('normal');
Ответить

Сергей
1
# 355
(12:03:07  25.10.2012 г.)

Наконец-то! Скрипт который работает во всех браузерах.
Ответить

Игорь
2
# 359
(20:53:10  25.10.2012 г.)

Здравствуйте. А не подскажите, как сделать загрузку изображений спойлера только после его открытия?
Ответить

Наталья
1
# 1476
(15:14:37  12.02.2014 г.)

Спасибо огромное, только у вас нашла без скриптов. Все работает отлично.
Ответить

Кочет Пётр
0
# 2020
(07:57:32  03.11.2014 г.)

Не используй JavaScript там где можно использовать CSS.
Ответить

Андрей
0
# 2315
(12:42:39  11.03.2015 г.)

Здравствуйте. А если под спойлером спрятать картинки, то они всё равно будут изначально загружаться при загрузке страницы? Мне бы очень хотелось сделать так, чтобы картинки, спрятанные под спойлером, открывались только тогда, когда открывается сам спойлер. Реально ли это?
Ответить

Administrator
1
# 2333
(19:37:33  14.03.2015 г.)

Реально. Сделал в виде отдельной темы - Скрипт спойлера с динамической загрузкой изображений.
Ответить

Марина
1
# 2537
(18:14:03  19.06.2015 г.)

А как сделать так, чтобы при клике на второй спойлер пропадал выдвинутый первый?
Ответить

Administrator
1
# 2540
(22:21:47  19.06.2015 г.)

Для этого я могу посоветовать Вам использовать другой более новый и продвинутый вариант скрипта спойлера с плавным открытием и скрытием содержимого.
Ответить

Валерий
0
# 2835
(17:41:35  28.11.2015 г.)

Здравствуйте, у меня все работает, но когда нажимаю на кнопку Спойлер, он открывается и через пару секунд сам закрывается.

Продвинутый вариант тоже пробовал, тоже все работает (и не закрывается), но там при подключении гугл аякс библиотеки пропадает меню шапки сайта.
Ответить

Закрыть
Ваше имя:
877 + 17 =
Добавить комментарий:
Ваше имя:
877 + 17 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 8

Какой браузер Вы используете?