rendered paste body<?
print "<ul id=top>\n";
for($i=0; $i<5; $i++)
{
print " <li id=li_$i class=button>$i\n";
print " <ul id=ul_$i class=button>\n";
for ($a=0; $a< 2; $a++)
{
print " <li id=li_$i-$a class=button>$i-$a\n";
print " <ul id=ul_$i-$a class=button>\n";
for ($c=0; $c<2; $c++)
{
print " <li id=li_$i-$a-$c class=button>$i-$a-$c</li>\n";
}
print " </ul>\n";
print " </li>\n";
}
print " </ul>\n";
print " </li>\n";
}
print "</ul>\n";
?>
this code generates something like this:
<ul id=top>
<li id=li_0 class=button>0
<ul id=ul_0 class=button>
<li id=li_0-0 class=button>0-0
<ul id=ul_0-0 class=button>
<li id=li_0-0-0 class=button>0-0-0</li>
<li id=li_0-0-1 class=button>0-0-1</li>
</ul>
</li>
<li id=li_0-1 class=button>0-1
<ul id=ul_0-1 class=button>
<li id=li_0-1-0 class=button>0-1-0</li>
<li id=li_0-1-1 class=button>0-1-1</li>
</ul>
</li>
</ul>
</li>
<li id=li_1 class=button>1
<ul id=ul_1 class=button>
<li id=li_1-0 class=button>1-0
<ul id=ul_1-0 class=button>
<li id=li_1-0-0 class=button>1-0-0</li>
<li id=li_1-0-1 class=button>1-0-1</li>
</ul>
</li>
<li id=li_1-1 class=button>1-1
<ul id=ul_1-1 class=button>
<li id=li_1-1-0 class=button>1-1-0</li>
<li id=li_1-1-1 class=button>1-1-1</li>
</ul>
</li>
</ul>
</li>
<li id=li_2 class=button>2
<ul id=ul_2 class=button>
<li id=li_2-0 class=button>2-0
<ul id=ul_2-0 class=button>
<li id=li_2-0-0 class=button>2-0-0</li>
<li id=li_2-0-1 class=button>2-0-1</li>
</ul>
</li>
<li id=li_2-1 class=button>2-1
<ul id=ul_2-1 class=button>
<li id=li_2-1-0 class=button>2-1-0</li>
<li id=li_2-1-1 class=button>2-1-1</li>
</ul>
</li>
</ul>
</li>
<li id=li_3 class=button>3
<ul id=ul_3 class=button>
<li id=li_3-0 class=button>3-0
<ul id=ul_3-0 class=button>
<li id=li_3-0-0 class=button>3-0-0</li>
<li id=li_3-0-1 class=button>3-0-1</li>
</ul>
</li>
<li id=li_3-1 class=button>3-1
<ul id=ul_3-1 class=button>
<li id=li_3-1-0 class=button>3-1-0</li>
<li id=li_3-1-1 class=button>3-1-1</li>
</ul>
</li>
</ul>
</li>
<li id=li_4 class=button>4
<ul id=ul_4 class=button>
<li id=li_4-0 class=button>4-0
<ul id=ul_4-0 class=button>
<li id=li_4-0-0 class=button>4-0-0</li>
<li id=li_4-0-1 class=button>4-0-1</li>
</ul>
</li>
<li id=li_4-1 class=button>4-1
<ul id=ul_4-1 class=button>
<li id=li_4-1-0 class=button>4-1-0</li>
<li id=li_4-1-1 class=button>4-1-1</li>
</ul>
</li>
</ul>
</li>
</ul>
thats the javascript:
document.observe('dom:loaded', function ()
{
buttons = $$('.button');
buttons.each(function(button,intIdx)
{
button.observe('click', function()
{
button.descendants().each(function(el){el.toggle()});
});
});
});