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.
Toggle div 1!
Initially hidden content (div 1) goes here.
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.
Pages:
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287