April 07, 2008

Expand with JavaScript; Link without JavaScript

Over at GodBit, someone needed to show a div when a heading was clicked, but if the user didn’t have javascript, the heading was a link to a detail page. This sounded like an interesting idea, so I poked around and here is what I ended up with:


$(document).ready(function(){
 $("h3 a").parent().next("div").hide();
 $("h3 a").click(function() {
  $("h3 a").parent().next("div").slideToggle();
  return false;
 })
});

The key here is return false;—that stops the click from triggering the link.

1 of 1

Who?

Howdy. I'm Richard W. Baker - a designer based in Jacksonville, Florida with a passion for information architecture and usable interfaces. At my day job, I work for the City of Jacksonville as a User Interface Designer.

If you still have questions, or you're interested in hiring me for your next project, .

Active ingredients: XHTML + CSS + Expression Engine
Page rendered in 0.1979 seconds  |  50 SQL queries total