JS / CSS Tabs and Accordions

Tabs and Accordions on a web page, driven by JavaScript and CSS.
Read CSS-Tricks about the problems with pure CSS tabs.
For inspiration about ARIA-compatible tabs see also Open AJAX.

One: Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim.

Two One: At atqui choro theophrastus sit, ne erroribus vulputate vis, eam et antiopam scripserit. Et sea altera salutandi iudicabit. Vidisse probatus moderatius cum te, et vis feugiat luptatum consulatu.

Two Two: Nec an stet decore honestatis, omittam maiestatis ei quo, eripuit facilis recusabo ius cu. Eu oblique detraxit honestatis vim, hinc sonet definitiones has ea.

Two Three: Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim.

Three One: Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim.

Three Two One: At atqui choro theophrastus sit, ne erroribus vulputate vis, eam et antiopam scripserit. Et sea altera salutandi iudicabit. Vidisse probatus moderatius cum te, et vis feugiat luptatum consulatu.

Three Two Two: Nec an stet decore honestatis, omittam maiestatis ei quo, eripuit facilis recusabo ius cu. Eu oblique detraxit honestatis vim, hinc sonet definitiones has ea.

Three Three One: Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim.

Three Three Two: Nec an stet decore honestatis, omittam maiestatis ei quo, eripuit facilis recusabo ius cu. Eu oblique detraxit honestatis vim, hinc sonet definitiones has ea.

Three Three Three: At atqui choro theophrastus sit, ne erroribus vulputate vis, eam et antiopam scripserit. Et sea altera salutandi iudicabit. Vidisse probatus moderatius cum te, et vis feugiat luptatum consulatu.

Test Expectations:

  1. Three top-level tabs are visible.
  2. Background color of a selected tab (white) is brighter than that of others (gray).
  3. Tab "One" contains just some text.
  4. Tab "Two" contains three sub-tabs.
  5. Tab "Two" -> "Two Two" must be pre-selected.
  6. Tab "Three" contains three accordion-tabs.
  7. In the accordion, several panels can be open at the same time.
  8. Tab "Three" -> "Three Three" must be pre-expanded.
  9. Accordion tab-bars must have an expand-control (arrow right or down).
  10. Open accordion expand-control must point downward, closed right.
  11. Clicking somewhere onto an accordion tab-bar is the same clicking its expand-control.
  12. Pressing CURSOR-RIGHT key navigates to next tab to the right.
  13. Pressing CURSOR-LEFT key navigates to next tab to the left.
  14. Pressing TAB key navigates to selected tab of an embedded tabbed pane.

Known Bugs:

  1. TAB key does not work in accordions.
  2. CURSOR keys do not work in accordions.
  3. Jumping from a tabbed pane to an embedded accordion via TAB key does not work.

Click here to view page source.

ɔ⃝  Fritz Ritzberger, 2016-01-01