Ik doe het op twee manieren, afhankelijk van wat voor html ik in het geval gebruik.
Eerste manier, met lijsten:
HTML:
<ul>
<li onclick="toggle(this);">Kopje 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
Javascript:
function toggle(node)
{
var child, ul;
if (node.hasChildNodes()) {
// loop through children, searching first <ul> node
for (var i = 0; i < node.childNodes.length; i++) {
child = node.childNodes[i];
if ((child.nodeType == 1) && (child.nodeName.toLowerCase() == 'ul') {
ul = child;
break;
}
}
// did we find a list?
if (ul) {
// toggle between display: block / display: none
ul.style.display = (ul.style.display == undefined || ul.style.display == 'none') ? 'block' : 'none';
}
}
}
Ziet er in eerste instantie wellicht moeilijk uit, maar als je het regel voor regel bekijkt is het heel logisch: zoek de eerstvolgende
<ul>, en zet de CSS display waarde daarvan op
block of
none. Reden dat ik loop door kinderen, is dat Internet Explorer als firstChild direct de
<ul> pakt, maar Firefox bijvoorbeeld niet: omdat er nog tekst staat, zit er een textelement node voor de
<ul> in de
DOM
Tweede manier, met
definition lists, mijn favoriet:
HTML:
<dl>
<dt onclick="toggle(this);">Kopje 1</dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dd>Item 3</dd>
</dl>
Javascript:
function toggle(node)
{
if (node) {
var sibling = node.nextSibling;
while (sibling) {
if (sibling.nodeType == 1) {
if (sibling.nodeName.toLowerCase() == 'dt') {
break;
} else {
sibling.style.display = (sibling.style.display == 'undefined' || sibling.style.display == 'none') ? 'block' : 'none';
}
}
sibling = sibling.nextSibling;
}
}
}
Deze is nog eenvoudiger: loop door de siblings van de node (
<dt>) heen, en toggle deze, totdat je een sibling
<dt> tegen komt (wat het volgende kopje is). Ter verduidelijking: een sibling is een naastgelegen element, een element op hetzelfde niveau in de DOM-structuur dus. Anders dan bij normale lijsten (
<ul>,
<ol>) liggen
<dt>'s en
<dd>'s op hetzelfde niveau,
<dd> is dus geen kind van
<dt>, wat je wellicht zou verwachten.
Heel verhaal, hopelijk heb je er wat aan. Voorbeelden kan je bekijken op
om.nl of
multilease.nl
Succes
ook voor Michael!!
![[img width=400 height=206]http://www.villain.nl/images/home_villain_fire.jpg[/img]](http://www.villain.nl/images/home_villain_fire.jpg)
