Tabbed Widget

Published on
Tags
Tabs, Widget, List
No. of comments
5 comments
Browser compatibility
Firefox 4, Safari 5.1, Chrome 14, Opera 10, IE 9
License
MIT License

A simple tabbed widget that works without JavaScript.

This snippet makes heave use of the new CSS3 selectors to create a tabbed content area using only CSS, while keeping the markup to a minimum (no hidden inputs & labels).

Each tab's content is toggled using the :target pseudo class selector and the current tab is highlighted using the ~ adjacent sibling combinator.

I then went a bit overboard with the child/type selectors in order to have the first tab activated by default.

Read the full source here.

Note: #target links make the page jump to the element with the matching ID when they're clicked. This is a bad user experience and I wouldn't use it in production. This snippet is more a demonstration of what CSS can do than a usable implementation. ;)

Original PSD by Aaron Sananes.

5 comments

Chris said
A4ddd338f60677b80965afbd95666636

Great snippet! Though how can we prevent it from jumping when a tab is clicked?

stuyart said
4e32aacc96fa5ef153f7d5fa6f7fd8a9

great work. very helpful for me. thanks

Timothy said
Bad3794bd9e9cf0a95f42b0fedcb693a

Does not work when there are more than 3 tabs.

Helio Viegas said
Bc06a86f40b0e42cd6bd02e876c10b09

great work., how can we prevent it from jumping when a tab is clicked?

Leave a comment

Comments are disabled.