This page is a Small Initiatives demonstration, prototype, design specification, archived work product or other conceptual document. Feel free to study and use it; however, please note that prototypes and concepts are not necessarily fully functional.

Tab interface you can put anywhere

The tab interface example is the yellow folder-tab block below. This text is here merely to show the tab interface can show up anywhere on the page, at almost any width, and even if its tab contents vary in length it lets objects around it snap into place.

Site visitor Ethan prepared an alternative sample, with tighter scripting. Check it out and compare.

Tab 1 Tab 2 Tab 3

This is content of Tab 1

The first tab content is very short.

Tab 1 Tab 2 Tab 3

Tab 2 shows up when you click

The second tab content is substantially more verbose. It's important to show that the size of the box displayed can vary but content and objects below it will snap into place. Now is the time to show lots of content in this box for a tab interface example.

The second tab content is substantially more verbose. It's important to show that the size of the box displayed can vary but content and objects below it will snap into place. Now is the time to show lots of content in this box for a tab interface example.

Tab 1 Tab 2 Tab 3

Last but not least, here's Tab 3

Shorter content again to demonstrate flexibility.

The tab interface example is the yellow folder-tab block above. This text is here merely to show the tab interface can show up anywhere on the page, at almost any width, and even if its tab contents vary in length it lets objects around it snap into place.

Back to the newsletter that explains this sample | SI Home