Создаем свой собственный спойлер для сайта
Предлагаем Вам совсем простой и небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.
Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на спойлер, находящееся чуть ниже:
Для получения точно такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код:
<script type="text/javascript">
function open_close(id_spol) {
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = 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>
Далее, в том месте Вашей странички, где Вы планируете использовать спойлер, необходимо добавить следующий код:
<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>
Вместо текстовой надписи "Спойлер (кликните для показа/скрытия)" можно использовать какую-нибудь картинку:
<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>.
<style type="text/css">
.spoiler_style {
width: 300px;
padding: 1px 7px;
cursor: pointer;
background: #e7e7e7;
border: 1px solid #4874a3;
border-radius: 3px;
}
.spoiler_body {
width: 480px;
padding: 1px 7px;
background: #F7F7F7;
border: 1px solid #669966;
}
</style>
Вот и все. В результате использования данного скрипта у Вас должен получиться простой спойлер, который поможет Вам сэкономить немало места на сайте и сконцентрировать внимание Ваших посетителей на самом главном.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Также второму спойлеру необходимо дать новое имя - id="spoiler2"
Берете id темы, которая будет под спойлером (простейшим SELECT-ом) и добавляете его в конец имени спойлера и события onClick. Таким образом, каждый спойлер будет уникальным и соответствовать только своей теме.
Предлагаю дальнейшее общение перенести на наш форум.
<div class="spoiler_style" onClick="open_close('spoiler1')">
на такую:
<div class="spoiler_style" onmouseover="open_close('spoiler1')" onmouseout="open_close('spoiler1')"
<div id="spoiler1" class="spoiler_body" style="display: none;">
<script type="text/javascript" src="spoiler.js">
</script>
Где spoiler.js - имя файла с JavaScript кодом.
Данный код необходимо добавить до первого использования спойлера (в любое место странички Вашей странички, желательно ближе к начальному тегу <body>).
В JavaScript код добавить цикл от 1 до 2 (а еще лучше в виде переменной) который будет добавлять цифры в конец имени спойлера. Для открытия используем имя группы: spoiler_
Как растянуть его по ширине страницы?
height: 100px;
overflow: auto;
где height: 100px - высота, а overflow: auto; отвечает за добавление полос прокрутки при необходимости.
Если нужно задать ширину самого спойлера (по которому кликают), то внесите изменения в стиль .spoiler_style.
Спасибо.
и перед var obj = ""; добавить следующее: $("div[id^='spoiler']").hide('normal');
Продвинутый вариант тоже пробовал, тоже все работает (и не закрывается), но там при подключении гугл аякс библиотеки пропадает меню шапки сайта.