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

  • Imtiazshah07

    Thanks you! its really works for me!!

  • Mark Edward

    Thanks for this. Simplified code! Cheers! 😀

  • cristenrh .

    thank you! This is exactly what i needed

This website is hosted by Media Temple. Thanks, guys!