Ask the CSS Guy

Javascript Triggers using <a>

For several recent projects, I've seen increased requests for a hidden div of content to be revealed when someone clicks a link.

For example, in Basecamp, if you want to write a message, you can just start typing in the textarea. Alternatively, if you want your text to have some formatting, a formatting guide will appear if you click a certain link.

Clicking the link triggers a javascript function that reveals the formatting guide.

A link toggler to trigger a hidden div is a very common approach for the show/hide effect. An <a> tag will have an href of "#" and an onclick event handles the toggling of an action, such as displaying a previously hidden div that, by default, was set to style="display:none;".

The largest advantage of the trigger text being a link is that users know that links are clickable, like tabs and buttons. If that trigger is to exist within the flow of paragraph text, then links (as opposed to tabs or buttons) is the way to go.

I've begun to question whether this trigger should be a link at all (meaning using the <a> tag) rather than <span>, and I was curious if anyone else has questioned this as well. I considered the thought, "Shouldn't links always be used to take the user somewhere?" Coincidentally, 37signals, who makes Basecamp, had a post about the show/hide links, in which they mention the "different breed of hyperlink—the 'do something' link, rather than the 'go somewhere' link."

If the user isn't going to be taken anywhere, is using the <a> element the best tag to use? Instead of continuing the "different breed" of hyperlink, use the <span> element instead, styled to look like a link.

HTML

<p>
  Check the
    <span class="actionlink" onclick="toggle('specialstuff')">
      formatting guide
    </span>
  ...
</p>

CSS

span.actionlink {
  color:#039;
  text-decoration:underline;
  cursor:pointer;
}
// and for browsers that support hover, the following:
span.actionlink:hover {
  text-decoration:none;
}

In this manner, a span of text can be the trigger, still look clickable to the end user, and there is no need to use <a> for text that doesn't really take the user anywhere.

Then again...

In thinking this through, another approach dawned on me that is even more standards-friendly.

If you are an accessibility zealot, you've probably already noticed something that should be different in the above examples: no div should have style="display:none;" declared in the markup. If javascript were not enabled in a user's browser, the user would not have the option to trigger an event to change that style to display:block. That div may have helpful content, but it wouldn't be accessible - it'd be in a state of purgatory, like being buried alive, forever ignored. If that div were a character in Law and Order, it would be the neglected teen that committed the murder because he was starved for attention from Daddy, but Mommy doesn't want to look like a bad mom so she insists that she, not her son, did the crime.

...

Instead, the div could just have an id, and javascript could be used to set that div with display:none; on page load.

For instance, instead of this...

<div style="display:none;" id="specialstuff">
...
</div>

<div id="specialstuff">
...
</div>

<p>
  Check the
    <a href="#" onclick="toggle('specialstuff')">
      formatting guide
    </a>
  ...
</p>

 onclick="toggle('specialstuff')">
      formatting guide
    </a>
  ...
</p>