Anchor Link Toggle

I enjoy enhancing webpages with Javascript as much as anyone, but there is a lot to be said for making things function just as well with plain ole’ HTML. Recently, I was marking up a design that included a box on the homepage that toggled between 2 states. I could have made the non-javascript fallback simply link to a modified version of the homepage that showed one or the other, but that would require an unnecessary page refresh. Instead, I put both sets of information in a div with overflow set to hidden. I then used anchor links to slide the contents of the div up and down to show the selected information. Confused? Check out the anchor link toggle demo.

Anchor link toggle demo screenshot

I’m certain this isn’t an original idea, but I haven’t ever seen anyone blog about it…probably because I don’t even really know what this technique should be called. Accessible toggle boxes, sliding anchor content, fairy-dustless slight of hand? Help me out here.

5 comments on “Anchor Link Toggle

Ken Seals says:

Very clever, indeed. I’ll keep this one in mind. If you didn’t on the live site.. it may be helpful to set the h4’s (cheese & chocolate) within each div to display:block; by default and to :none with the j-sizzle. Just a thought.. would give non js users a better idea which one they’re viewing with minimal work.

word.

Yea, that’s really why those H4s are in there. The demo here works a little differently than the real client version – mainly to keep the project ambiguous. If I had more time, I’d make a downloadable code sample. I don’t think anyone will find the code from this specific demo useful, but hopefully the concept itself is transferable.

Dan Schulz says:

Jason, I just wanted to let you know this does not work in Opera with JavaScript disabled (latest stable version). All I saw was the cheese content.

Paul O’Brien cooked something similar though last year (or the year before, I forget which). You can see it in action (sans JavaScript) at http://www.pmob.co.uk/temp/hideandshow2-css.htm (Note: It does work in the latest version of Opera, but still does not work in Safari. Otherwise it’d be the ideal solution to script-free tab swapping.)

Thanks for pointing out the snag with Opera, Dan. While it sucks that Opera will not scroll the contents of the div with javascript turned off, IE6, IE7, Firefox 2, Firefox 3, and Safari 3 will. I was going to test it out in Chrome, but apparently there isn’t a way to disable Javascript without tacking a command on to a shortcut to the application. Oh well, Chrome is webkit based…it should work there too.

The non-Javascript users I’m worried most about with this site are those on IE or Safari. If someone is browsing with Javascript turned off in a non-OS-default browser, it’s much more likely that they know that things may not work and more importantly, how to turn it back on.

Took me a second to figure out what was going on. Very nicely done!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to the top!