Раскрывающийся список

[nematora]

Добрый день !!!

Сделал раскрывающийся список, но хочу ещё в добавок поставить значок "+" перед списком и сделать так что бы он менялся на "-" если список раскрыт.

http://jsfiddle.net/wgyN6/

Честно говоря даже не знаю как лучше сделать, можете подсказать как лучше? Думаю загрузить две картинки и . но как организовать смену этих картинок по щелчку, я не знаю

<script type="text/javascript">

function shiftSubDiv(n)

{

var el = document.getElementById('subDiv'+n);

if ( el.style.display == 'none' )

el.style.display = 'block'

else

if ( el.style.display == 'block' )

el.style.display = 'none';

};

</script>

<div class="navHeader" onclick="shiftSubDiv(1)" style="cursor: pointer">

<h2>Раздел</h2>

</div>

<ul id="subDiv1" margin-left:25px="" style="display:none">

<li><h4>подраздел1</h4></li>

<li><h4>подраздел2</h4></li>

</ul>

[Searcher]

Скриптом надо менять не свойство display, а класс, тогда и возможностей море.

И, соответственно, пишите 2 класса, для открытого списка и для закрытого. В одном минус, в другом - плюс.

[nematora]

Скриптом надо менять не свойство display, а класс, тогда и возможностей море.

И, соответственно, пишите 2 класса, для открытого списка и для закрытого. В одном минус, в другом - плюс.

а можно чуть подробнее ?

[alexandr_v-vich]

Можно начать отсюда http://www.tigir.com/javascript.htm

раздел - "Как узнать/изменить значение атрибута class элемента (свойство className)?"

А в разных классах для "<h2>Раздел</h2>" пропишите или background с картинкой (+ или -) или через :after/:before.

[Searcher]

на скорую руку: http://jsfiddle.net/mrSearcher/te6rp/

это чтобы без лишних id можно было бы обойтись.

Ну и по структуре у вас не правильно было. Смотрите мой пример выше.

[nematora]

Searcher и alexandr_v-vich

Спасибо большое. Совсем не давно, даже не знал как сделать, а теперь есть два варианта.

P.S. да, кстати, использование классов намного упрощает работу....теперь стало намного интереснее практиковаться.

Edited March 16, 2012 by nematora