Horizontal Accordion Slider Thingy - CSS3 Play

This is...

A horizontal accordion/slider thingy made using no images or javascript. CSS3 isn't news anymore, and something like this has probably been done already. But does it work in IE? ...No. But there are already accordions to do thaaat.

This is how to set it up:

  1. In the markup, a list or divs in a div (articles in a section for HTML5 semantics?). I used a list so one <li> is a tab.
  2. Set up CSS styles so inner elements are a fixed size for the 'tab'. Float all those inner elements to the left.
  3. When hovering the tab, have it expand to full size with a nice transition. Meanwhile, other tabs shrink back thanks to an initial transition applied to them.
  4. The default tab needs to close when the other ones are hovered, so without JavaScript we have to tell it to close when the containing (not sibling) element is hovered. This causes a glitch, especially when mousing left to right, where the default tab will collapse anyway because your mouse has touched the containing element.

This is how to make it better:

PS: Noticed some interesting things about CSS3 skewing and unskewing when I started fancying this up. The leftmost tab has extra text and overflow:auto so you can scroll it with the scroll wheel of your mouse (although the scrollbar is hiding...)