How To: Create a manila folder like vertical tabs using CSS

Using CSS, one can rotate any component using transform property by providing a degree of rotation.

In this blog, I will show how I used this CSS property to create a manila folder with vertical tabs as shown below.

I have used a panel for the main page and textboxes for the tabs. Use your preferred styles to format the visuals.

In my CSS for the active and the inactive tabs (the textboxes on the right), I have included the transform property with a 90 degree rotation as -ms-transform: rotate(90deg); (for cross browser compatibiltiy, use vendor prefixes). Use onclick script to alternate between CSS styles for activating the tabs.

Please see the attached document for the CSS used in this demo.

Note: using transform property, one can achieve the same effect using the tabstrip component also.