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

ivank · Отправлено: **20:31, 02-11-2006** | #11

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

Dimonka · Отправлено: **17:41, 03-11-2006** | #12

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

elfoflorien · Отправлено: **18:13, 03-11-2006** | #13

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

Prisoner · Отправлено: **18:16, 03-11-2006** | #14

Цитата Dimonka:

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

Dimonka, без

Цитата ivank:

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

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

.

asus a9rp · Отправлено: **23:34, 20-07-2012** | #15

Решил не создавать новую тему.
Доброго всем времени суток! Недавно возникла необходимость создания спойлеров, но я это решил так:

Код:

<a id="show_1" onclick="document.getElementById('spoiler_1').style.display=''; document.getElementById('show_1').style.display='none';" class="link1">Открыть спойлер</a>
<span id="spoiler_1" style="display: none">
<a onclick="document.getElementById('spoiler_1').style.display='none'; document.getElementById('show_1').style.display='';" class="link2">Закрыть спойлер</a>
<br>Текст</span><br>

В интернете нашёл

Дело вот в чём... Спойлеров довольно много и нужно придумать как закрыть открытый спойлер при открытии другого. Т.е. что бы одновременно могло быть открыто не более одного спойлера.
Простите, если вопрос окажется простейшим... Я только html и css знаю. И то, не на профессиональном уровне.
Заранее благодарен!

Iska · Отправлено: **00:29, 21-07-2012** | #16

Цитата asus a9rp:

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

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

asus a9rp · Отправлено: **23:27, 21-07-2012** | #17

Я в 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 · Отправлено: **03:53, 22-07-2012** | #18

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

Код:

Sub HighlightAnswer(strElement)
  Set objTagDivCollection = document.all.tags("DIV")

  If Not IsNull(objTagDivCollection) Then
    For Each objTagElement In objTagDivCollection
      If objTagElement.className = "Show" Then
        objTagElement.ClassName = "Hide"
      End If

      If objTagElement.id = strElement Then
        objTagElement.ClassName = "Show"
      End If
    Next
  End If
End Sub

Если тэгов несколько видов (например ещё SPAN, A и т.п.) — просто постройте из них массив/коллекцию и пройдитесь по ним в цикле, заключив в него содержимое приведённой процедуры.

asus a9rp · Отправлено: **22:44, 26-07-2012** | #19

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». »

Есть.

Цитата Iska:

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

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

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

Цитата Iska:

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

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

Iska · Отправлено: **01:02, 27-07-2012** | #20

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';