Modularizing the collapsible content script

Although the previous script works perfectly well for a single div, it’s awkward if you want
to use several divs over the course of a page. That’s how the old Images from Iceland site
works, and I had to keep track of id names and values while constructing it. However, it is
possible to make a toggler strip more modular, although this relies on keeping document
structure very strict as far as the collapsible sections go. The files for this section are in the
collapsible-div-modular folder within the chapter 5 folder.
The JavaScript is similar to that in the previous example.
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.parentNode.nextSibling;
if(targetElement.className == undefined) {
targetElement = toggler.parentNode.nextSibling.nextSibling;
}

if (targetElement.style.display == "block") {
targetElement.style.display = "none";
}
else {
targetElement.style.display = "block";
}
}
}
The main change is that instead of targeting a div with a specific id value, the script
targets an element in relation to the one being used as a toggler, by way of the
parentNode/nextSibling JavaScript properties.
If you look at the HTML document, you’ll see that the parent of the anchor element is the
p element. What the next sibling element is depends on the browser—Internet Explorer
just looks for the next element in the document (div), but other browsers count whitespace
as the next sibling.
<p><a href="#" title="Toggle section" onclick="toggle(this); return
å false;">Toggle div 1!</a></p>
<div class="expandable">
<p>Initially hidden content (div 1) goes here.</p>
</div>
It would be possible to get around this by stripping whitespace. However, a line in the
JavaScript makes this unnecessary.
if(document.getElementById) {
targetElement = toggler.parentNode.nextSibling;
if(targetElement.className == undefined) {
targetElement = toggler.parentNode.nextSibling.nextSibling;
}
The first line of the previous code block sets the target to the next sibling of the parent
element of the link. In Internet Explorer this works, but other browsers find only whitespace.
Therefore, the second line essentially says, “If you find whitespace (undefined),
then set the target to the next sibling on.” It’s a bit of a workaround, but it’s only one line
of JavaScript.
The JavaScript also includes the method used in the preceding “Enhancing accessibility for
collapsible content” section, to make the togglable sections initially invisible in JavaScriptenabled
browsers only. Note that the related CSS is slightly different to that shown in the
previous section—instead of hidden content being in a div with an id value of hiddenDiv,
it’s now in multiple divs, all of which have a class value of expandable. Therefore, the
selector in the CSS rule has been updated accordingly:
.expandable {
display: none;
}

This system enables you to use as many collapsible divs as you like on the page, and you
don’t have to set id values—the toggling is essentially automated. However, as mentioned
earlier, you must ensure that your structure remains the same for each area that can be
toggled, otherwise the script won’t find the correct element to make visible or invisible
when the links are clicked.