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

XCodeR · Сообщение **XCodeR** » 02 ноя 2006, 16:30

Dimonka

А что вас не устраивает в этом варианте? Он прекрасно показывает идею. Дальше уж расширяйте как пожелаете.

ivank · Сообщение **ivank** » 02 ноя 2006, 18:21

А ещё есть что-нибудь по этой теме, Может встречались варианты поэкзотичнее

ivank · Сообщение **ivank** » 02 ноя 2006, 19:31

Просто интересно

+ тот пример по умолчанию открыт, а мне надо чтобы он по умолчанию был свёрнут

Dimonka · Сообщение **Dimonka** » 03 ноя 2006, 16:41

Dimonka

просто напишите style="visibility: hidden; display: none;" или как там его..

elfoflorien · Сообщение **elfoflorien** » 03 ноя 2006, 17:13

Цитата Dimonka:

тот пример по умолчанию открыт, а мне надо чтобы он по умолчанию был свёрнут

Dimonka, без
Цитата ivank:

доработать напильником

не получится, увы. Но это не так уж и сложно - поглядите код приведенного примера и используйте подсказку данную в этом топе. Ну и по аналогии, не все же там открыто

.

asus a9rp · Сообщение **asus a9rp** » 03 ноя 2006, 17:16

Цитата asus a9rp:

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

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

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

Iska · Сообщение **Iska** » 20 июл 2012, 23:34

Я в JavaScript - новичок. Покапавшись в интернете, я смог написать работающий вариант:

Код:

Код: Выделить всё

<!DOCTYPE html><html><head><title></title></head><body>
<a id="open1" onclick="
document.getElementById('close1').style.display='';
document.getElementById('open1').style.display='none';
document.getElementById('open2').style.display='';
document.getElementById('close2').style.display='none';
" class="link1">Open</a><span id="close1" style="display: none"><a onclick="
document.getElementById('close1').style.display='none';
document.getElementById('open1').style.display='';
" class="link2">Close</a><br>TEXT</span><br>
<a id="open2" onclick="
document.getElementById('close2').style.display='';
document.getElementById('open2').style.display='none';
document.getElementById('open1').style.display='';
document.getElementById('close1').style.display='none';
" class="link1">Open</a><span id="close2" style="display: none"><a onclick="
document.getElementById('close2').style.display='none';
document.getElementById('open2').style.display='';
" class="link2">Close</a><br>TEXT</span>
</body></html>

Это - только для двух спойлеров. А у меня их много... Можно ли это как-то "ужать"?

asus a9rp · Сообщение **asus a9rp** » 21 июл 2012, 00:29

Я в JavaScript - новичок. Покапавшись в интернете, я смог написать работающий вариант:

Код:

Код: Выделить всё

<!DOCTYPE html><html><head><title></title></head><body>
<a id="open1" onclick="
document.getElementById('close1').style.display='';
document.getElementById('open1').style.display='none';
document.getElementById('open2').style.display='';
document.getElementById('close2').style.display='none';
" class="link1">Open</a><span id="close1" style="display: none"><a onclick="
document.getElementById('close1').style.display='none';
document.getElementById('open1').style.display='';
" class="link2">Close</a><br>TEXT</span><br>
<a id="open2" onclick="
document.getElementById('close2').style.display='';
document.getElementById('open2').style.display='none';
document.getElementById('open1').style.display='';
document.getElementById('close1').style.display='none';
" class="link1">Open</a><span id="close2" style="display: none"><a onclick="
document.getElementById('close2').style.display='none';
document.getElementById('open2').style.display='';
" class="link2">Close</a><br>TEXT</span>
</body></html>

Это - только для двух спойлеров. А у меня их много... Можно ли это как-то "ужать"?

Iska · Сообщение **Iska** » 21 июл 2012, 23:27

Iska, на данный момент получается вот что (с двумя спойлерами):

Код:

Код: Выделить всё

<style type="text/css">
.show {display: block;}
.hide {display: none;}
</style>
<script type="text/javascript">
function my(){
divs = document.getElementsByTagName("div");
for( var x=0; x < divs.length; x++ ) {
divs[x].className='show';
}
spans = document.getElementsByTagName("span");
for( var x=0; x < spans.length; x++ ) {
spans[x].className='hide';
}
};</script>
<div onclick="my(); document.getElementById('close1').className='show';
document.getElementById('open1').className='hide';" class="show" id="open1">
<a class="link1">Open1</a></div>
<span onclick="my();" class="hide" id="close1"><a class="link2">Close1</a><br>
TEXT1<br></span>
<div onclick="my(); document.getElementById('close2').className='show';
document.getElementById('open2').className='hide';" class="show" id="open2">
<a class="link1">Open2</a></div>
<span onclick="my();" class="hide" id="close2"><a class="link2">Close2</a><br>
TEXT2<br></span>

Цитата Iska:

определите в CSS два класса (например, «Hide» и «Show»), различающихся видимостью. Изначально, при загрузке страницы, присвойте всем спойлерам, какие они у Вас там будут, класс «Hide».

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

Есть.

Цитата Iska:

Получаете коллекцию спойлеров, пробегаетесь по ней в цикле, закрываете все спойлеры.

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

Есть. Теперь при увеличении количества спойлеров onclick не разрастается. Меня уже всё устраивает

Спасибо! Но всё же хочется, что бы в onclick отсался только скрипт. Для этого осталось:

Цитата Iska:

Затем уже открываете потребный, с которого пришло событие.

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

Сейчас вожусь с этим. Я разобрался, как получить элемент, с которого пришло событие: var t = event.target || event.srcElement[/i] С этим t уже можно делать что угодно. Но вот, в чём проблема. Имеется 3 элемента: ссылка открытия спойлера, ссылка закрытия спойлера и содержимое. t - это элемент, с которого пришло событие. Он один. Думаю, как к нему привязать остальные два.

asus a9rp · Сообщение **asus a9rp** » 22 июл 2012, 03:53

asus a9rp, в функции обработки события ориентируйтесь, например, на однозначное определение типа элемента, от которого пришло событие, и их взаимное расположение относительно друг друга: т.е. на то, что первый из связанных тэгов у Вас — тэг «div», следующий за ним — тэг «a», следующий за ним — тэг «span». Таким образом, проверяя тип тэга и используя DOM («.previousSibling»/«.nextSibling»), Вы всегда сможете по полученному в функции обработки события event.srcElement получить доступ к двум другим, связанным с ним, тэгам, что позволит избежать Вам написания однотипного кода при тэгах:

Код:

Код: Выделить всё

document.getElementById('close1').className='show';
document.getElementById('open1').className='hide';
…
document.getElementById('close2').className='show';
document.getElementById('open2').className='hide';
…
document.getElementById('closeN').className='show';
document.getElementById('openN').className='hide';

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

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

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

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

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

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

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

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

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

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

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