пс, вроде норм
Только еще один момент, там идет нумерация, просто у меня будет очень много спойлеров, и каждый нумеровать неудобно.
Было бы лучше, если без нумерации Оо
Есть вот такой еще один спойлер, работает безупречно, и без нумерации, вот только как сделать ему, что бы было два слова открыть и закрыть причем эти два слова, что бы были в самом блоке спойлера вот:
Код:
<HTML>
<HEAD><meta charset="utf-8">
<TITLE>Скрипт</TITLE>
<style type="text/css">
.spoiler {border-radius:7px; border:1px solid blue; background:lavender;}
.spoiler {cursor:pointer; margin:5px 0;}
/*.spoiler:hover {background:lavenderblush;}*/
.spoiler dt:hover {background:lavenderblush; border-radius:12px;}
.spoiler dt {margin:3px; padding:2px 0 5px 9px;}
.spoiler dd {display:none; border-radius:7px; border:1px solid blue;}
.spoiler dd {margin:0 9px 7px 33px; padding:7px; text-align:justify;}
.spoiler dd {background:lavender;}
</style>
<script>
document.onclick=function(ev){//клик где то по документу
var obj=ev?ev.target:event.srcElement;//остальные или ИЕ
//в цикле просматриваем все теги, от тега по которому щёлкнули до тега HTML.
while(obj.parentNode){//если нет, то вышли за пределы HTML
if(obj.className=="spoiler"){break;}//если попался нужный элемент
else{obj=obj.parentNode;}};//иначе ищем дальше
//на выходе из цикла проверяем где вышли
if(obj.className=="spoiler"){
clickSpoiler(obj);
return false;};
//если не спойлер, значит кликнули мимо
closet();
};
function clickSpoiler(el){//клик по dl, dt, dd
var s=el.getElementsByTagName("dd")[0].style.display;
closet();
if(s=="none"||s==""){//открыть по которому кликнули
el.getElementsByTagName("dd")[0].style.display="block";};
};
function closet(){//закрываем все не глядя
var m, k;
m=document.getElementsByTagName("dl");
k=m.length;
while(k--){
if(m[k].className=="spoiler"){
m[k].getElementsByTagName("dd")[0].style.display="none";}};
};
</script>
</HEAD>
<body>
<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>
<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>
<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>
</body>
</HTML>
Единственно o
nclick="event.stopPropagation()" я сам поставил, что бы не исчезал спойлер.