getButterfly Logo getButterfly

NETTUTS: How to create a slick tabbed content area

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

8 thoughts on “jQuery Tabs

  1. I thought the same. I’ve never built one before and didn’t even know you could do it with HTML, so I’m curious as to how you’re going to do it.

  2. I thought that you would lead us through it. Looks like you will do it and showcase it to us later. Look forward to seeing it.

  3. Thanks for the info and the link, and dont forget to give us a sample you worked on.

  4. I love jQuery’s tabs. Its so easy to customise the CSS as well so they integrate nicely into your site.

  5. I will show you some samples pretty soon. I just came back from a short vacation.

  6. I love Nettuts, they have so many different ways to code things. I really like it how you highlighted this post.. It was a great resource to find out how to make tabs :)

  7. thanks for the link, it is useful

Leave a Reply

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