HTML, разворачивание элемента

← →
Пит (2009-06-15 16:11) [0]

Может быть такая фишка на HTML-странице, по-умолчанию, виден только некий заголовок, например:

[Скриншоты]

Кликаешь на этот заголовок и раскрывается под ним элемент с самими скриншотами. Кликаешь опять - схлопывается.

Я знаю один вариант так делать. Заголовок - статичный элемент, а описание есть элемент со стилем display = "none". По клике по заголовку стиль делается "block", еще раз кликнешь - опять "none", таким образом и достигается функционал раскрытия / закрытия.

Структура выглядит так:

<div id="header">[Скриншоты]</div> <div id="desc" style="display: none;">Описание</div>

Проблема в том, что я не могу использовать заданные жесткие ID. Я мог бы написать аля:

if document.all.desc.style.display == "none" { document.all.desc.style.display = "block" }
else { document.all.desc.style.display = "none" }

Но не могу работать через ID "desc", так как я не знаю сколько раз этот кусок кода будет интегрирован в страницу (а может быть более одного). То есть, код сам по себе должен быть так сказать самодостаточным и "не пересекаться" при его размножении по тексту страницы. В данном конкретном примере пересекаются ID, так как этот параметр должен быть уникальным для всех элементов на странице.

Можно использовать параметр this, но сложность в том, что клик происходит по заголовку, а изменять свойства нужно у описания. То есть типа такого:

<div id="header" onclick="ChangeVisible(this)">[Скриншоты]</div>

не прокатит, ибо передастся this элемента заголовок. А как передать в относительном виде элемент описания?

Надеюсь, разъяснил... как смог (( Если непонятно - уточняйте плиз

← →
Холивар (2009-06-15 16:39) [1]

> Пит (15.06.09 16:11)

Так генерируй уникальные ID для каждого элемента

← →
palva © (2009-06-15 16:49) [2]

Вот так можно
<script> function f(e) { c=e.childNodes[1]; if(c.style.display=="block") c.style.display="none"; else c.style.display="block"; } </script> <div onclick="f(this)">[Скриншоты] <div style="display: block;">Описание</div></div>

← →
palva © (2009-06-15 17:07) [3]

Вообще, не все так просто. Придется усложнить.
function f(e) { c=e.childNodes[1]; if(c.style.display=="block") c.style.display="none"; else c.style.display="block"; } function b(e) { if (window.event) window.event.cancelBubble = true; else e.stopPropagation(); } </script> <div onclick="f(this)">[Скриншоты] <div style="display: block;" onclick="b(event)">Описание</div></div>

← →
palva © (2009-06-15 17:31) [4]

Еще один вариант.
function f(e) { c=e.nextSibling; if(c.style.display=="block") c.style.display="none"; else c.style.display="block"; } </script> <div onclick="f(this)">[Скриншоты]</div><div style="display: block;">Описание</div>
Но тут надо следить, чтобы между двумя дивами не было пробелов и переводов строк. Иначе в Firefox NextSibling выскакивает на эти пробельные символы.

← →
Cobalt © (2009-06-15 17:47) [5]

попробуй посмотреть, как сделано на torrents.ru - там как раз такая фишка.

P.S. исходники рулят ;-)

← →
М. Береговой (2009-06-16 21:53) [6]

Может проще так сделать?:
<div> <div onclick="f(this)">[Скриншоты] <div style="display: block; position:absolute;" onclick="b(event)">Описание</div></div> </div> <script> function f(el) { if(el.parentNode.childNodes[1].style.display=="block") el.parentNode.childNodes[1].style.display="none"; else el.parentNode.childNodes[1].style.display="block"; } </script>
position:absolute; - нужен, чтоб нижние элементы не сдвигались на странице..

← →
М. Береговой (2009-06-16 21:55) [7]

Поторопился... вот так:

Может проще так сделать?:
<div> <div onclick="f(this)">[Скриншоты]</div> <div style="display: block; position:absolute;" >Описание</div> </div> <script> function f(el) { if(el.parentNode.childNodes[1].style.display=="block") el.parentNode.childNodes[1].style.display="none"; else el.parentNode.childNodes[1].style.display="block"; } </script>
position:absolute; - нужен, чтоб нижние элементы не сдвигались на странице..

← →
antonn © (2009-06-16 22:15) [8]

когда то делал для IPB:
<div style=" BACKGROUND-COLOR: #FAFAFC; BORDER-RIGHT: #A7A7A7 1px solid; BORDER-TOP: #A7A7A7 1px solid; BORDER-BOTTOM: #A7A7A7 1px solid; BORDER-LEFT: #A7A7A7 1px solid;"> <span><div style="cursor:hand; c\ursor:pointer; FONT-SIZE: 11px; BACKGROUND-COLOR: #E9E9E9; COLOR: #101010; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 1px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px;" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!="block") ? "block" : "none"; obj.display=tmp;return false;"> Свернутый текст (щелкните, чтобы прочесть)</div><div style="FONT-SIZE: 13px; COLOR: #101010; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; PADDING-RIGHT: 4px; display:none;"> {content} </div></span></div>

← →
Пит (2009-06-17 16:38) [9]

спасибо за помощь

← →
partizan (2009-06-17 22:50) [10]

Страница генерируется на php, или ручками html делается?
Если ручками - в чем проблема разные id сделать?
Если php (или любой другой язык) - random

> partizan (17.06.09 22:50) [10]

или посмотреть [8], поддержка вложенности как бонус

HTML, разворачивание элемента Найти похожие ветки