| home / programming / css_content / 1 |    [previous][next] |
|
|
|
As you saw in the HTML, there are style classes assigned to some elements:
<h1><a href="javascript:void(0)" class="dsphead" onclick="dsp(this)"> <span class="dspchar">+</span> heading</a></h1> <div class="dspcont">section</div>To enable them, add the following to either the style section of the page head or to its linked CSS file:
a.dsphead{
text-decoration:none;
margin-left:1.5em;}
a.dsphead:hover{
text-decoration:underline;}
a.dsphead span.dspchar{
font-family:monospace;
font-weight:normal;}
.dspcont{
display:none;
margin-left:1.5em;}
The class a.dsphead suppresses the normal underlining of links, which would be obnoxious—and unnecessary—in the headings we're creating. Adding a.dsphead:hover provides link confirmation during mouseovers.
The dspchar class defines our +/- expand/collapse cues. Monospace is used because when the plus sign becomes a minus, a proportional font would cause the heading to twitch.
The class dspcont is crucial; it causes the subordinate sections to be hidden by default. However, defaulting to display:none brings a catch...
What happens if Javascript is disabled? Since we're using a script to toggle the section display, any user who's unplugged Javascript will never get past the top-level headings.
To cover that possibility, we need to add a noscript section with a fall-back dspcont style rule, overriding the display:none setting. It must be added to the page's head section after the default styles or the link to the CSS file:
<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>
</noscript>
A single function is used for section display. It looks at the +/- cue character and flips what it finds, then reverses the display state of the adjacent content block.
function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;
foc.innerHTML=foc.innerHTML=='+'?'-':'+';
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none':'block';}}
Because dsp() relies on DOM compliance, it first performs a litmus test for document.getElementById, known only to DOM-savvy browsers. If all's well, it defines the variable foc, the "focus of attention", as the current location's first child element. The cue character switch is achieved through the innerHTML property, then foc is redefined to the adjacent section and its display state is switched between block and none. Both the +/- character and display change require a test for the target node, since browsers on different platforms count sibling nodes differently.
All well and good, but what if the user's browser doesn't recognize DOM? Page content will be hidden, but the dsp() function will be powerless to show it. Once again, we need a failsafe provision that redefines the default style rule. If document.getElementById returns false, we write out a rule for .dspcont that's like the one we included in the noscript tag. Obviously, this must be positioned after the default styles are defined.
if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');
The dsp() function is invoked by onclick events in the link tags:
<h1><a href="javascript:void(0)" class="dsphead" onclick="dsp(this)"> <span class="dspchar">+</span> heading</a></h1> <div class="dspcont">section</div>
You might be tempted to use javascript:dsp(this) as the href attribute, which would obviate the need for an onclick event:
<a href="javascript:dsp(this)" class="dsphead">
The problem is that the DOM information we need isn't conveyed by javascript:dsp(this); any reference to parentNode would be undefined. That's why we substitute void(0) and rely on onclick to deliver the goods. Why use a link at all, if href is useless? It's a matter of keyboard accessibility; we need a link—even to a void function—to have the headings picked up by keyboard tabbing. A div element with an onclick, for example, wouldn't be detected. Named anchors, such as <a name="heading">, are also skipped by the tab sequence.
| home / programming / css_content / 1 | [previous][next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 26, 2003
URL: URL: http://webreference.com/programming/css_content/1
