Здравствуйте! Нашла на вашем сайте ваш чудный спойлер для сайта. Скажите, а как сделать, чтобы если несколько спойлеров на странице - при открытии одного, остальные сворачивались?
Вы кому то в комментариях советовали, как я поняла, сделать так:
Код:
<script type="text/javascript">
function open_close(id_spol) {
$("div[id^='spoiler']").hide('normal');
var obj = "";
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>
но у меня открывается и закрывается только один спойлер, остальные не открываются вообще((
Вот полный код:
Код:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function open_close(id_spol) {
$("div[id^='spoiler']").hide('normal');
var obj = "";
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>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="spoiler_style" onClick="open_close('spoiler1')"
style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
<b>Спойлер1</b> (кликните для показа/скрытия)
</div>
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<div id="spoiler1" style="display:none; background:#F7F7F7">
Здесь содержится все то, что должен скрывать спойлер.<br>
Под спойлером может содержаться не только текст, но и картинки,<br>
таблицы и другие элементы.<br>
<img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</div>
</td>
</tr>
<tr>
<td>
<div class="spoiler_style" onClick="open_close('spoiler1')"
style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
<b>Спойлер2</b> (кликните для показа/скрытия)
</div>
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<div id="spoiler2" style="display:none; background:#F7F7F7">
Здесь содержится все то, что должен скрывать спойлер.<br>
Под спойлером может содержаться не только текст, но и картинки,<br>
таблицы и другие элементы.<br>
<img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</div>
</td>
</tr>
<tr>
<td>
<div class="spoiler_style" onClick="open_close('spoiler1')"
style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
<b>Спойлер3</b> (кликните для показа/скрытия)
</div>
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<div id="spoiler3" style="display:none; background:#F7F7F7">
Здесь содержится все то, что должен скрывать спойлер.<br>
Под спойлером может содержаться не только текст, но и картинки,<br>
таблицы и другие элементы.<br>
<img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</div>
</td>
</tr>
</table>
</body>
</html>
Подскажите, что поправить??