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>

Use this…

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

and a style for #specialstuff to have display:none could be set via javaascript.

Then, in our original trigger link, instead of having a throw-away href…

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

Put in something actually useful – a link to the anchored element – making our link an actual “go somewhere” link in addition to a “do something” link.

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

The idea being, if javascript were disabled, the trigger element still has value in that clicking it will take the user to the desired div. If javascript is enabled, the script could ignore the href and just trigger the show/hide behavior.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Daniel said:
This is great and I’m glad you took the time to consider users who do not have javascript enabled. In response to what William said:
I personally always like to have something in the href, even just a hash symbol. To avoid being returned to the top of the page after clicking the link w/ href = “#” (and since the user is only clicking the link to trigger some javascript we can assume that they have javascript enabled) you need to pass the event into the function you trigger as a parameter and in the function called disable the events default behavior.
ex:
<a href = “#” onclick= “foo(event);”>HI</a>
function foo(ev){
ev.preventDefault();
//do other stuff
}
I hope that helps someone as much as it has helped me.