Manual Tab Panels

A tabpanels will be opened after the currently focused tab element has been purposefully activated by press of Enter or Space keys.

Manual activation example


No explicit default was set, so per standard functionality this first tabpanel will be shown by default.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and keyboard tabs.)


This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

These things are never about fruit...

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.