Hoi allemaal,
Ik ben al een paar dagen bezig om een collapsible list te maken m.b.v. javascript, maar ik kom er niet meer uit. Misschien dat ik ergens een stom foutje over het hoofd zie
De bedoeling is om een lijst met links te maken waarvan 2 links verder geopend (en gesloten) kunnen worden zoals aangegeven in het voorbeeld hieronder:
Home
Werkwijze
Aanbod (kan open of closed)
Ik heb het volgende js code
[JS]function toggle() {
this.className = this.className == "closed" ? "open": "closed";
}
function setup()
{
var lis = document.getElementsByTagName('li');
for (var i = 0; i<lis.length; ++i) {
var li = lis;
if (li.className) {
li.onclick = toggle;
li.className = "closed";
}
}
}[/JS]
Dit is het betreffende stukje html:
En de css code:
Ik ben al een paar dagen bezig om een collapsible list te maken m.b.v. javascript, maar ik kom er niet meer uit. Misschien dat ik ergens een stom foutje over het hoofd zie

Home
Werkwijze
Aanbod (kan open of closed)
Begeleiding
Behandeling
Opvang
Referenties (kan open of closed)Behandeling
Opvang
Ref A
Ref B
Ref B
Ik heb het volgende js code
[JS]function toggle() {
this.className = this.className == "closed" ? "open": "closed";
}
function setup()
{
var lis = document.getElementsByTagName('li');
for (var i = 0; i<lis.length; ++i) {
var li = lis;
if (li.className) {
li.onclick = toggle;
li.className = "closed";
}
}
}[/JS]
Dit is het betreffende stukje html:
HTML:
<div id="navi">
<ul>
<li class="normaal"><a href="html/visie.html"> Visie </a></li>
<li class="open">Aanbod
<ul>
<li><a href="html/behandeling.html">Behandeling</a></li>
<li><a href="html/begeleiding.html">Begeleiding</a></li>
<li><a href="pdf/iq.pdf">IQ-test</a></li>
</ul>
</li>
<li class="open">Referenties
<ul>
<li><a href="html/ref_a.html">Ref A</a></li>
<li><a href="pdf/B.pdf">Ref B</a></li>
<li><a href="html/ref_c.html">Ref C</a></li>
</ul>
</li>
<li class="normaal"><a href="html/cv.html"> CV </a></li>
<li class="normaal"><a href="html/contact.html"> Contact </a></li>
</ul>
En de css code:
Code:
#navi li {
list-style-type: none;
}
#navi li.normaal {
list-style-image: url(../images/bal_klein.png);
}
#navi li.open {
list-style-image: url(../images/minus.png);
}
#navi li.closed {
list-style-image: url(../images/plus.png);
}
#navi li.closed ul {
display: none;
}
#navi li.open li {
list-style-image: url(../images/bal_klein.png);
}