Как создать спойлер на Javascript

[mr.Morgan]

сталкивался с такой проблемой, набросал для вас код

<input id=spoil type=hidden value=0>
<div id=spoil1 onclick=spoiler(1) style="display:none;">текст 1 спойлера</div>
<div id=spoil2 onclick=spoiler(2) style="display:none;">текст 2 спойлера</div>
<div id=spoil3 onclick=spoiler(3) style="display:none;">текст 3 спойлера</div>


function spoiler(n)
{
var o = $("#spoil").val();
if((n != o)&&(o > 0))
{
$('#spoil'+o).hide();
$('#spoil'+n).show();
document.getElementById('spoil').value=n;
} else if(o == 0) {
$('#spoil'+n).show();
document.getElementById('spoil').value=n;
} else
{
$('#spoil'+n).hide();
document.getElementById('spoil').value=0;
}
}

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

[asus a9rp]

Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. Если я не напортачил, конечно...
mr.Morgan, увы, я не смог заставить это работать, но за идею с ('#spoil'+o) огромное спасибо!
Я придумал несколько другой вариант спойлера в надежде, что всё заработает:
<a onclick="s(this.id)" class="show" id="open1">Open1</a>
<a onclick="s(this.id)" class="hide" id="close1">Close1</a>
<span onclick="s(this.id)" class="hide" id="content1">Content1</span>

<a onclick="s(this.id)" class="show" id="open2">Open2</a>
<a onclick="s(this.id)" class="hide" id="close2">Close2</a>
<span onclick="s(this.id)" class="hide" id="content2">Content2</span>
function s(id){
var o = parseInt(id.replace('open',''), 10);
var c = parseInt(id.replace('close',''), 10);
var t = event.target.id || event.srcElement.id
if (t=="open"+o){
document.getElementById("open"+o).className='hide';
document.getElementById("close"+o).className='show';
document.getElementById("content"+o).className='show';
}else if (t=="close"+c){
document.getElementById("open"+c).className='show';
document.getElementById("close"+c).className='hide';
document.getElementById("content"+c).className='hide';
}else{return}}
Всё работает отлично, но у меня не получается закрыть все спойлеры.
Я нашёл такую штуку:
function returnAttributes(at){
var arr=[];
var elem=document.getElementsByTagName('*'), i=0, e;
while(e=elem[i++]){
e[at]?arr[arr.length]=e[at]:null;
}
return arr;
}
onload=function(){
var allIds=returnAttributes('id');
alert(allIds);
}
Этот скрипт создаёт список всех id на странице. Всё, что нужно - это из allIds выбрать все, что подходят по образцу к openN и closeN и для всех тегов с подходящими id задать .className='show' и .className='hide', соответственно. У меня вот с выбором по образцу пока проблема...

[Iska]

Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. »
Всё можно. Просто эта структура:
<div>
<a></a>
</div>
<span></span>
отличается от приведённой выше, где все тэги находились на одном уровне.

Смотрите, в процедуре обработки события Вы определяете, от какого элемента оно пришло. У нас есть три случая:

1. От «div».

При этом тэг «div» определяется как элемент, от которого пришло событие:
elem=window.event.srcElement;
Тэг «a» определяется, как первый дочерний элемент по отношению к тэгу «div»:
elem=window.event.srcElement.firstChild;
Тэг «span» по отношению к тэгу «div» определяется, как следующий элемент в коллекции элементов того же уровня:
elem=window.event.srcElement.nextSibling;

Аналогично рассуждаете и для прочих тэгов:
2. От «a».
«div»:
elem=window.event.srcElement.parentNode;
«a»:
elem=window.event.srcElement;
«span»:
elem=window.event.srcElement.parentNode.nextSibling;

3. От «span».
«div»:
elem=window.event.srcElement.previousSibling;
«a»:
elem=window.event.srcElement.previousSibling.firstChild;
«span»:
elem=window.event.srcElement;

Дальше делаете с полученным потребным элементом что угодно.

Два замечания:
* не забывайте, что события «всплывают» по иерархии обработчиков, потому отменяйте сие, где надо («cancelBubble»);
* мои рассуждения касаются прежде всего IE, как модели DOM, так и реализации JavaScript, в классической же интерпретации (стандарт консорциума WWW) могут быть некоторые отличия.