Unobtrusive Tabs

With Prototype and CSS

Structure

This tabbed element starts with a simple and semantic construction technique. The HTML is laid out in logical order, with a header (which becomes the tab) followed by any number of non-header related content elements; and this pattern is repeated for each of the tabs. Turn off JavaScript and refresh your browser to see the page in its native state.

When the page loads, the content is shuffled around with JavaScript. All of the tabs are pulled up and into a generated div.tabholder element. In the process, they are each decorated with an expando attribute containing references to all of their related content elements.

There’s no rules you need to follow except to pick one tag to use as your tabs, and only use it for that within your tabbed area. Content may be nested if you like, and the content area may be made up of mixed tags.

Style

This example is styled in the following manner:

  1. The div.tabbed is padded 0 at the top, and 8px left, right and bottom, and has a 1px gray border.
  2. Div.tabholder (inserted by JavaScript) has a background color that matches the page, and is pulled out to cover div.tabbed’s padding and border with negative margins at the top and sides.
  3. Div.tabholder also has a bottom border to match the border around div.tabbed.
  4. The tabs are styled as inline-block, given shape with padding, and given borders to match div.tabbed. They are each pulled down 1px with negative bottom-margin so their borders will align with the .tabholder bottom border.
  5. The “active” tab has a 1px white bottom border to cover the border on the .tabholder, visually connecting the tab to the content it is attached to. If you wanted your active tab to have a different color, you would need this border color and the background on div.tabbed to match.

Script

https://gist.github.com/1909932

Gratuitous Extra Tab