Заметки быдлокодера

Ещё разок привет! Это моя вторая запись. Надеюсь, она получится длинее первой.
Однажды мне очень понадобилось написать иерархический список для веба. Полазил в гугле и ничего подходящего не нашёл. Пришлось самому придумывать. Сам скрипт довольно простой, а вот html конструкция получилась довольно громоздкой. Возможно, и есть способы её упростить, но мне лень было думать. Так вот, смысл в том, чтобы создать независимые друг от друга конструкции. Для удобства скрывания и раскрывания. Способ оказался достатчно прост. Есть родительский див с ссылкой (можно что угодно вместо неё) и n-ным кол-вом скрытых дивов. При щелчке на ссылку, скрипт перебирает все дочернии элементы родительского дива и по условию (id и display: none) делает их видимыми пользователю. А внутри раскрытого дива ещё ссылка и скрытые дивы. и т.д. таким образом можно создать многоуровневый список любой сложности.
Теперь разберём подробно сам скрипт.
Он состоит из 3 частей.
1) собираются переменные.
2) цикл, который меняет картинку открытой папки на закрытую и наоборот.
3) цикл, раскрывающий скрытый элемент.

<  script language="Javascript"  >
function unhide(element)
{
    var catId = element.id;
    var pchild = element.parentNode.childNodes;
    var cchild = element.childNodes;
    for (var i=0; i<  cchild.length; i++)
    {
        if (cchild[i].id == "papka" && cchild[i].src.substring( cchild[i].src.lastIndexOf('/') + 1, cchild[i].src.length ) == "papkac.png")
        {
            cchild[i].src = "papkao.png"
        }
        else if (cchild[i].id == "papka" && cchild[i].src.substring( cchild[i].src.lastIndexOf('/') + 1, cchild[i].src.length ) == "papkao.png")
        {
            cchild[i].src = "papkac.png"
        }
    }
    for (var i=0; i<  pchild.length; i++)
    {
        if(pchild[i].id == "hide" && pchild[i].style.display == "none")
        {
            pchild[i].style.display = "block";
        }
        else if (pchild[i].id == "hide" && pchild[i].style.display == "block")
        {
            pchild[i].style.display = "none";
        }
    }
}
<  /script  >

теперь хтмл код. Он довольно запутан поэтому здесь и запутанная версия и простая
Запутанная.

<  html  >
<  head  >
<  /head  >
<  body  >
<  div style="display: block"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 0<  /a  >
<  div Id="hide"  style="display: none; padding-left: 18px; "  >
 <  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 1<  /a  >
<  div Id="hide"  style="display: none; padding-left: 18px;"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 2<  /a  >
<  div id="hide" style="display: none; padding-left: 35px; font-size: 15pt"  >
aaaaa
<  /div  >
<  /div  >
<  /div  >
<  /div  >
<  div style="display: block"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 0<  /a  >
<  div Id="hide"  style="display: none; padding-left: 18px; "  >
 <  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 1<  /a  >
<  div Id="hide"  style="display: none; padding-left: 18px;"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 2<  /a  >
<  div id="hide" style="display: none; padding-left: 35px; font-size: 15pt"  >
aaaaa
<  /div  >
<  /div  >
<  div Id="hide"  style="display: none; padding-left: 18px;"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >уровень 2.1<  /a  >
<  div id="hide" style="display: none; padding-left: 35px; font-size: 15pt"  >
aaaaa
<  /div  >
<  /div  >
<  /div  >
<  /div  >
<  /body  >
<  /html  >

Простая

<  div Id="hide"  style="display: none; padding-left: 18px;"  >
<  a id="c1"   onclick="unhide(this)" class="main"  ><  img id="papka" width="35" height="35" src="papkac.png"  >Вопрос 2.1<  /a  >
<  div id="hide" style="display: none; padding-left: 35px; font-size: 15pt"  >
текст который раскрывается, при нажатии на ссылку "вопрос 2.1" так же вместо него может быть второй уровень.
<  /div  >
<  /div  >

теперь создадим стиль для ссылок.

<  style  >
.main{
font-size: 18pt;
}
.main:hover{
background: #ccccff;
cursor: pointer ;
}
.main:active{
color: #aa0000;
background: #ccccff;
cursor: pointer ;
}
<  /style  >

Если, что не понятно, то пишите в коменты!

Привет!Сразу говорю — это не то о чём вы подумали =) Это моя первая запись в этом блоге. И вообще моя первая запись в блоге, потому что это мой первый блог. Этот бложек создан для меня, для моих заметок по кодингу и вообще заметок. Но если вам интересно познакомится со мной или вы просто хотите связаться, то добавляйтесь в друзья и пишите в скайпик.