Как создать спойлер на Javascript - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Как создать спойлер на Javascript (http://forum.oszone.net/showthread.php?t=73628)

Dimonka

28-10-2006 07:39 503637

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

Занят разработкой сайта, и возникла такая необходимость:

Имеется таблица, в ней в строках написаны названия программ, и надо, чтобы после нажатия на название программы вниз (типа выезжающего списка) открывался спойлер со скриншотом и описанием.

Прошу помощи, как это осуществить
+ желательно, чтобы при открытии html странички в Dreamweaver все спойлеры были развёрнуты, т.к. программ очень много, и так будет быстрее и легче, чем каждую описывать непосредственно в коде

Заранее благодарен

vadimiron

01-11-2006 01:41 505112

Что то типа такого? здесь

Dimonka

02-11-2006 10:30 505715

Нет, абсолютно нет. после нажатия на название программы вниз (типа выезжающего списка) открывался спойлер !!!!!

mar	02-11-2006 10:50 505734

Dimonka
прошу прощения, а что означает страшное слово спойлер? =)

Prisoner

02-11-2006 12:10 505780

mar, респект, я постеснялся спросить :). Лично в моем понимании спойлер это нечто сугубо автомобильное...

vadimiron

02-11-2006 14:26 505847

Prisoner :)

hasherfrog

02-11-2006 15:06 505870

В более общем смысле, "спойлеры" - необязательная информация, которая может испортить пользователю впечатление от предстоящей жизни, но которую можно узнать при желании. Например, рассказать человеку краткое содержание фильма/книги == "выдать спойлер".

На форумах же "спойлером" обзывают ту часть отображаемого контента страницы, которую пользователь может открыть по желанию, но которая изначально скрыта как не необходимая. Кстати, по сути своей, выпадающие меню на javascript - тоже спойлеры (их не видно, пока пользователь не захочет).

Dimonka, я угадал? :]

XCodeR

02-11-2006 17:30 505937

свойство css display&visibility

ivank

02-11-2006 19:21 505992

http://www.artlebedev.ru/tools/techn...html/treeview/ По желанию доработать напильником.

Dimonka

02-11-2006 19:37 505997

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

ivank

02-11-2006 20:31 506026

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

Dimonka

03-11-2006 17:41 506480

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

elfoflorien

03-11-2006 18:13 506505

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

Prisoner

03-11-2006 18:16 506511

Цитата:

Цитата Dimonka

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

Dimonka, без

Цитата:

Цитата ivank

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

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

asus a9rp

20-07-2012 23:34 1955885

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

Код:

<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	21-07-2012 00:29 1955908

Цитата:

Цитата asus a9rp

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

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

asus a9rp

21-07-2012 23:27 1956301

Я в 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	22-07-2012 03:53 1956365

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

26-07-2012 22:44 1959598

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	27-07-2012 01:02 1959698

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

mr.Morgan

31-07-2012 01:34 1961843

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

HTML код:

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

PHP код:


		
			
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

02-08-2012 00:28 1963152

Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. Если я не напортачил, конечно...
mr.Morgan, увы, я не смог заставить это работать, но за идею с ('#spoil'+o) огромное спасибо!
Я придумал несколько другой вариант спойлера в надежде, что всё заработает:

HTML код:

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

PHP код:


		
			
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}}

Всё работает отлично, но у меня не получается закрыть все спойлеры.
Я нашёл такую штуку:

PHP код:


		
			
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	02-08-2012 01:36 1963188

Цитата:

Цитата asus a9rp

Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. »

Всё можно. Просто эта структура:

Код:

<div>

    <a></a>

</div>

<span></span>

отличается от приведённой выше, где все тэги находились на одном уровне.

Смотрите,

Время: 07:10.