CSSPLAY

CSS DEMOS › CSS only tabbed pages with persist and other features

Date : 23rd June 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

[F] Persist [G] Multiple [T] Links [U] Forms [W] Gallery

Tab 'persist'

You can set a default tab on first page entry. The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if you leave the page and return.

Multiple Tabs

You can have multiple tabs on the same page with just small changes to the CSS.

Does not use :target, iframes, objects, javascript or jQuery.

There is also no problems when using the browser 'back' button.

The content can contain links

This content can be anything you like including LINKS.

Port de Pollença

Photograph © stu nicholls

Forms will work as expected within the tabbed content

The form details will still be entered when you leave this tab and then return.

Username

Password

Even Galleries are possible

The image selected will still be selected when you return to this tab.

01 02 03 04 05 06 07 08 09 10

Accesskeys 2 3 4 5 6 7 8 9 0 X

Information

Using my latest techniques (June 2012) to produce a set of tabbed pages using just CSS.

These tabs have a persist feature and can contain any information you like.

This demo has the tabbed pages pushing down the content below, but can easily be styled to flow over this content.

An open tab will stay open even when clicking elsewhere on the page and when returning to the page. The content of the tabbed pages can be anything you like. Form content will be remebered if you leave the page (ot tab) and then return.

This does not use :target so there is no problem with the browser 'back' button.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.