WEB STANDARDS CREATIVITY

226
The markup
The high-level structure of the page content is fairly simple. The data modules on the left are contained in their own section,
followed by the central content, then more data modules on the right:
. . .
. . .
. . .
The most important thing to note here is that if the user moves content from one module area to the other, it must be
placed into the appropriate container.
The HTML for your web page doesn’t have to strictly follow the template laid out in modular.htm. However,
the JavaScript and CSS used in the example are tailored for that markup and would need to be tweaked
according to the way your particular page is laid out.
Inside each of the module areas, we separate each of the modules into its own section, using a div with a class of module:
Search
. . .
Most of our JavaScript will be focusing on this h2 element, as it provides the handle with which to perform the expand/
collapse and moving actions. We’re not concerned with the HTML contained inside the moduleContent div, as that’s specific
to each module. We just want to abstract our framework to deal with each module block.
Expanding and collapsing modules
The ability to expand and collapse content is not a new concept, and it’s actually quite simple. Probably the most important
thing we can do is to keep it unobtrusive and accessible.
On the unobtrusive side of things, users who do not have JavaScript turned on should not be offered functionality that they
cannot access. This means that the elements that allow for expanding/collapsing should be included via the JavaScript itself.