WEB STANDARDS CREATIVITY

We could incorporate the JavaScript to do this in many ways. In order to maintain our solid HTML base, we use JavaScript
that intercepts, or “hijacks,” the click on the navigational items and toggles the state of the navigational panes. It employs a
function called toggle, which switches between an exposed navigational pane and its original state. It would be best to
assign these dynamically to each of the navigational items, but for the sake of clarity, this ultimately results in the following
for our navigational links:
Recent Posts
Here is a quick look at the first version of the toggle function from wscslide.js:
function toggle(element) {
var inner = document.getElementById('inner-wrap');
/* if the scripting isn't supported, we want to return true so that
default behavior of clicking the link works (i.e., take the user
to the bottom part of the page)
*/
if (!document.getElementById) return true;
var elt = document.getElementById(element);
// do a test on the className property on the element to
// check for the exposed class
if (/exposed/i.test(elt.className)) {
// exposed state was found, so remove it
elt.className = elt.className.replace(/exposed/g,'');
} else {
// add exposed to current class to respect any
// styles/classes that already exist
elt.className += " exposed";
}
return false;
}
In this case, the core functionality is provided by the hrefs. Ensuring that they are in place means that we achieve
a base level of interoperability with scripting either on or off. Don’t confuse this with accessibility for people with
disabilities. We’ll address accessibility later after we’ve taken care of the basic interoperability needs.
The critical component of this script is that we’re using scripting to take over for the functionality provided by the
links in the HTML. This ensures that a person using a browser without scripting support will be
taken to the correct part of the page.
This serves as the base for the rest of the scripting. With this main toggle in place, we can add in our sliding behaviors.
chapter 10 Accessible Sliding Navigation
251