Simple jQuery Show/Hide Tabs

Updated June 20, 2010: There’s an improved version of this code posted here. Use it instead!

I am learning jQuery and really loving it! Here’s a simple bit of code I wrote to achieve an interface element. It’s basically tabs — there’s a list of links and when you click one the corresponding content is shown. It assumes there’s an equal number of links and content blocks. And that they’re in the same order. The HTML is like so:


The # links / id’s on the content div’s are to give some functionality for people without JavaScript. Here’s the jQuery:


Simple! Best wishes to you in your coding!

Posted December 2009

Made under the ☀ in Austin, Texas.
WordPress hosting by WP Engine, thanks y’all!

© 2022 Spellerberg Associates LLC