CSSPLAY

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

Date : 30th May 2012

For all modern browsers

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

• Tab One
• Tab #2
• Tab No.3
• The Fourth Tab
• Any Content

Tab 'persist'

The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.

Multiple Tabs

You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).

Tab Action from elsewhere on the same page.

You can also open a tab using links elsewhere on the same page.

If you click this LINK you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.

Opened by a link from another page

Link from another page can select a tab on the target page when loaded.

No restrictions on tab content

Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.

From Wikipedia, the free encyclopedia.

Photograph © stu nicholls

You can open the second tab by clicking here OPEN #2

Information

Using the latest techniques to produce a set of tabbed pages using just CSS.

These tabs have a persist feature, can be oenend fron other links on the same page of by targetted links on other pages, 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.

I have also added a javascript routine to remove the browser history of tab clicks for browsers that support this, but this routine is not necessary for the correct working of the demo.

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.