<pg-tabset>

Wrap a list of links (a tablist) and their corresponding target elements (tabpanels) in this wrapper element and it will automatically provide a functional, accessible tabset.

Features

Usage

Download JS file

Conditionally load the JavaScript only if the <pg-tabset> is present on the page at load:

if (document.querySelectorAll('pg-tabset').length) import('./tabset.min.js');

Load the script as a module in WordPress:

wp_enqueue_script_module( 'pg-tabset', get_theme_file_uri( 'js/pg-tabset.min.js' ), [], filemtime( get_theme_file_path( 'js/pg-tabset.min.js' ) ) );

Content

Required content
  • An <ol class="tablist"> or <ul class="tablist"> element. This element should contain children <li> elements which themselves contain <a> elements which target their corresponding tabpanels via their href attributes.
  • The elements that represent the tabpanels, each with id attributes that are targeted by their corresponding tabs.
Permitted content
Flow content (though this is unlikely to be desirable)

Attributes

No attributes are defined for this component.

Properties

No public properties are exposed by this component.

Events

No custom events are dispatched by this component.

Style

No additional CSS is required beyond that called for by the overall page design.

Examples

Default Appearance

First Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet feugiat nisi, tincidunt semper magna. Sed eget fermentum enim, ac volutpat felis. Sed ultricies tempor magna tempus auctor. Sed ex arcu, volutpat eget orci vitae, molestie mattis sapien. In commodo maximus volutpat. Nam hendrerit, leo sed lacinia dictum, massa sem pulvinar tortor, sed sagittis nibh lorem eget mi. Mauris viverra, ante ac maximus tempor, ex turpis volutpat libero, id vulputate ligula turpis et libero. Etiam iaculis risus quam, at finibus odio vulputate quis. Maecenas mattis ante et condimentum cursus. Nulla ullamcorper nisl vehicula tortor pulvinar venenatis. Vivamus tempus et leo non gravida. Aenean hendrerit ullamcorper faucibus.

Another Section

Praesent nunc eros, varius id nunc non, pellentesque laoreet ante. Curabitur maximus libero a accumsan porttitor. Integer accumsan elit massa, ac gravida ipsum tristique vitae. Morbi vitae blandit mi. Nulla cursus venenatis tincidunt. Phasellus suscipit, ex id sagittis tincidunt, nunc ipsum iaculis arcu, id rutrum magna urna id nisl. Suspendisse a nisi at enim tempor gravida. Pellentesque nec enim dictum, fermentum neque in, scelerisque lacus. Etiam facilisis leo ac lectus egestas luctus. Donec ut interdum purus. Aenean sapien dolor, fermentum in sem sed, facilisis interdum tellus. Fusce vulputate iaculis neque in convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Nam sed condimentum dolor. Aenean mollis dignissim elit, ac pulvinar ligula finibus eget.

Last Section

Vestibulum tincidunt ullamcorper felis. Nunc molestie luctus mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In maximus vulputate lorem, at gravida enim imperdiet vel. Mauris id sem sed arcu luctus sodales eget vel libero. Praesent venenatis lacus porta purus volutpat, sit amet efficitur lectus maximus. Phasellus at placerat metus. Curabitur convallis laoreet quam, a accumsan arcu convallis et. Phasellus efficitur nunc et volutpat sagittis. Phasellus a lectus eget libero elementum malesuada. Cras in faucibus justo. Sed posuere convallis neque, eget commodo lacus finibus quis. Nunc maximus feugiat purus, ut lacinia ipsum vehicula sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Tests

Empty Component

The required child elements are not present.

Result: a console error is thrown.

Missing Target Tabpanel

A tab, via its href attribute, targets an tabpanel that is not present. (Note that this example contains four tabs in the markup.)

Result: a console error is thrown and the tab is hidden.

First Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet feugiat nisi, tincidunt semper magna. Sed eget fermentum enim, ac volutpat felis. Sed ultricies tempor magna tempus auctor. Sed ex arcu, volutpat eget orci vitae, molestie mattis sapien. In commodo maximus volutpat. Nam hendrerit, leo sed lacinia dictum, massa sem pulvinar tortor, sed sagittis nibh lorem eget mi. Mauris viverra, ante ac maximus tempor, ex turpis volutpat libero, id vulputate ligula turpis et libero. Etiam iaculis risus quam, at finibus odio vulputate quis. Maecenas mattis ante et condimentum cursus. Nulla ullamcorper nisl vehicula tortor pulvinar venenatis. Vivamus tempus et leo non gravida. Aenean hendrerit ullamcorper faucibus.

Another Section

Praesent nunc eros, varius id nunc non, pellentesque laoreet ante. Curabitur maximus libero a accumsan porttitor. Integer accumsan elit massa, ac gravida ipsum tristique vitae. Morbi vitae blandit mi. Nulla cursus venenatis tincidunt. Phasellus suscipit, ex id sagittis tincidunt, nunc ipsum iaculis arcu, id rutrum magna urna id nisl. Suspendisse a nisi at enim tempor gravida. Pellentesque nec enim dictum, fermentum neque in, scelerisque lacus. Etiam facilisis leo ac lectus egestas luctus. Donec ut interdum purus. Aenean sapien dolor, fermentum in sem sed, facilisis interdum tellus. Fusce vulputate iaculis neque in convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Nam sed condimentum dolor. Aenean mollis dignissim elit, ac pulvinar ligula finibus eget.

Fourth Section

Vestibulum tincidunt ullamcorper felis. Nunc molestie luctus mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In maximus vulputate lorem, at gravida enim imperdiet vel. Mauris id sem sed arcu luctus sodales eget vel libero. Praesent venenatis lacus porta purus volutpat, sit amet efficitur lectus maximus. Phasellus at placerat metus. Curabitur convallis laoreet quam, a accumsan arcu convallis et. Phasellus efficitur nunc et volutpat sagittis. Phasellus a lectus eget libero elementum malesuada. Cras in faucibus justo. Sed posuere convallis neque, eget commodo lacus finibus quis. Nunc maximus feugiat purus, ut lacinia ipsum vehicula sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


Back