Responsive & Versatile"All-In-One" Solution

The heuristic we used to determine if the tabs of a tabPanel can fit side-by-side relies on the height of the tabs. Any edit that messes up with their height (i.e. top border) will trigger an infinite loop.

To be able to preserve a panel state via a URL you need to add the following attribute to the widget: data-tpw-id giving it a unique value (i.e. data-tpw-id="myWidget").

Another reason for this feature to "fail" is if your page is in an iframe or a frameset.

Headers in Accordions are styled with display:flex so if you have text nodes and "tags" (i.e. <code>) as direct children of the "headers" then things may appear very misaligned, whitespace may be missing, etc.

To easily fix this, you can simply wrap the content of your headers inside a <span>.

If your tabs look broken, it is because there are some CSS rules in your document that are styling the headings in the Widget.

The TabPanelWidget stylesheet tries to prevent such styling by increasing selector specificity and "resetting" common declarations (font-size and margins for example), but things will look broken if other styles target—and overwrite— the styles of the headings used as Tabs/Headers.
See below how you may fix such issues.

IE 10 does not "support" the hidden attribute so if you want to support IE10 and does not include a stylesheet like Normalize, you will need to add the following to your stylesheet:

[hidden] {display: none;}

An easy way to prevent your CSS rules from styling the Widget's headings is to rely on the :not() pseudo-class. You'd need to attach :not(.tpw-hx) to the selector in which those headings are the target.
For example, a selector like this for your headings:

section h3 {margin: 1rem 0;}

Would become this:

section h3:not(.tpw-hx) {margin: 1rem 0;}

The above will style your level 3 headings inside section without styling the h3 used as the Widget's tabs/headers—even if the Widget is inside a section.

Please keep in mind that using :not() will bump the specificity of your selector/rule.

Yes, each Widget can be "skinned" individually via various classes. (See the usage section above or the Wiki).

Note that—to improve performance—whatever styles you are not using with your Widget(s) should be deleted from the stylesheet.

• :focus .tpw-panel {
    box-shadow: none !important;
    outline: none !important;
  }

• :focus:not(:focus-visible),
  :focus:not(:focus-visible) .tpw-panel {
    box-shadow: none !important;
    outline: none !important;
  }

The former will remove the focus ring for all users, the latter will only remove the focus ring for mouse users (as long as the browser supports :focus-visible).

Depending on the content of the panels in the Widget you can—to some extent—minimize the reflow (below the Widget) by styling the Widget with a min-height, as we do with the TabPanel in the Demo section.

You may be trying to style the tabs and/or headers via rules that do not carry enough specificity.

To give a decent "skin" to the Widget "out-of-the-box", we tried to find a balance between unstyling elements that would inherit styles from a document's stylesheets and also make sure to use selectors that would carry enough "weight" (i.e. the specificity of many of our rules is greater than 0,1,1,0 ).

For minor customization, we suggest you use the scss file and edit its variables. For more serious changes, we suggest you edit the rules or declarations directly in the tabpanelwidget.scss stylesheet rather than trying to overwrite styles by writing new rules.

<dl>, <dt> and <dd> as main elements of a Widget are transformed into <div>. The reason for this is due to HTML structure. TabPanels need a tablist and it would be malformed HTML to insert an empty <div> as first-child of the Definition List.

Nonetheless, you can style the tabs, headers, and tabpanels using these classes:

• .tpw-tab
• .tpw-header
• .tpw-panel

If the Widget appears to be styled with visibility:hidden, it is certainly because your markup is malformed (i.e. if you have a <p> as direct child of a <dl>).

To prevent this from happening, you can run the markup of your Widget through the validator.

You can use the selector in the following example to style a Widget (or its children) when it is not displayed as a TabPanel nor an Accordion (when the script has not transformed them):

.tpw-widget:not(.tpw-js) {margin: 0;}

Obviously, there are a lot of changes in the markup and the styling once the script mounts the Widget(s), but it is possible to reduce the FOUC effect—in modern browsers—by including the following rule in your stylesheet:

html:not(.no-js):not(.tpw-\!fouc) .tpw-widget {
  visibility: hidden;
}

The class tpw-!fouc is set by the script while the class no-js is used as a generic hook to style elements according to script support (if you use a different class to achieve this, then use it in the selector above in-lieu of no-js).

Note that for the first Widget on this page, we also rely on a min-height to minimize the reflow.

You can either edit the value of the variables in the SCSS file (i.e. $fontSize:1.5rem) or write new rules. If you choose to do the latter, you can rely on these selectors:

• .tpw-hx to target the headings (mostly to reset their styling)
• .tpw-tab to target the Tabs in the TabPanels
• .tpw-header to target the Headers in the Accordions

To style the active tab or header, use these selectors:

• .tpw-selected .tpw-tab
• .tpw-selected .tpw-header

To target an active panel (or multiple open panels in case of an Accordion), you can use the following:

• .tpw-selected + div > .tpw-panel

Note that overriding the styling of headings will require more specificity than overriding the styling of Tabs/Headers via .tpw-tab and .tpw-header. This is because the styling of .tpw-hx is meant to overwrite styles that could "leak" onto the headings used in the Widget.

The Widget is positioned and styled with z-index:0 which means the Widget and its children will not show over any other positioned elements in your page that have an explicit z-index value greater than 0.

<script>
    // TabPanelWidget
    const uninstall = await Tabpanelwidget.install(document.querySelector('#ThisWidgetOnly'));
    // or worse, can use a callback as second arg (make sure you don't call uninstall before it's set in this case):
    // let uninstall; Tabpanelwidget.install(el, _uninstall => (uninstall = _uninstall))
    // ... later, if needed
    uninstall();
</script>

You may encounter this issue when using the bookmark/share feature (data-tpw-id) which is something we do not recommend to use if the page contains anchors.

There is a good chance that your Widget uses only a subset of the stylesheet (which includes many different styles for TabPanels and Accordions). So you should trim the stylesheet to keep only the styles you are actually using—to load a much smaller file.