We help IT Professionals succeed at work.

How to create advanced tabs as shown

sweetac1 asked
Medium Priority
Last Modified: 2013-12-25
I'm trying to implement tabs in html/css as shown in the attachment. Can anybody tell me the best way to accomplish this?
Watch Question

Creating the tabs is pretty simple, here's some simple javascript for switching in between the tabs.


The rest is just creating graphical buttons for the tabs, and setting the color of the tab content area using CSS.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts


Thanks, I was out of town so didn't have a chance to reply. I was actually looking for an all-xhtml/css solution and I found one. Thank you for your reply, though.
If the tabs are for a commercial website, make sure that the CSS solution that you found works in IE6 as well, since IE6 has a lot of problems displaying CSS correctly, and quite a few people still use it.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.