When a page contains a set of <section> elements with titles this script generates an unordered list that works as a tab UI. The last viewed tab is stored in localStorage.
Fully functioning back to IE8.
NB it's very alpha.
Currently it depends on specific SMACSS/BEM style class names on the <section>s, their headings, and a wrapper element. These are js-panel, js-panel__title and js-tab-ui respectively.
It also has a small script in <head> that is used to eliminate FOUC. It replaces the no-js class name on the root element with js-tabs which is used in the CSS.
None of the CSS is required however, the tabs work as a plain unordered list if none is applied.
For keyboard interaction tab to the first tab, use the arrow keys to move between tabs, and press space to show the corresponding panel.
- use a config object
- better keyboard interaction
This was inspired by Marco Zehe's Advanced ARIA tip #1: Tabs in web apps.
Heydon Pickering has published an excellent jQuery example which uses a <ul> in the source with skiplinks to the sections.