« Controlling chunking Global banners »
Elastic Docs ›Docs HOWTO ›Asciidoc Guide

Tabbed widgets

edit

Tabbed widgets

edit

Improve the usability of your docs by adding tabbed widgets. These handy widgets let you conditionally display content based on the selected tab. Best of all, tabbed widgets listen to each other – all widgets on the same page and with the same data-tab-group will change content when any tab on the page is selected.

How do they work? I’m glad you asked. Tabbed widgets use HTML passthrough blocks to pass raw HTML into the build. Because of this hack, you must use include:: statements to render content within a tabbed widget.

Here’s an example:

widget.asciidoc

++++
<div class="tabs" data-tab-group="custom-tab-group-name"> 
  <div role="tablist" aria-label="Human readable name of tab group">
    <button role="tab"
            aria-selected="true" 
            aria-controls="cloud-tab-config-agent" 
            id="cloud-config-agent"> 
      Tab #1 title
    </button>
    <button role="tab"
            aria-selected="false"
            aria-controls="self-managed-tab-config-agent"
            id="self-managed-config-agent"
            tabindex="-1"> 
      Tab #2 title
    </button>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="cloud-tab-config-agent"
       aria-labelledby="cloud-config-agent">
++++

// You must use a tagged region for Asciidoc content to render. For example:
// include::content.asciidoc[tag=central-config]

++++
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="self-managed-tab-config-agent"
       aria-labelledby="self-managed-config-agent"
       hidden="">
++++

// You must use a tagged region for Asciidoc content to render. For example:
// include::content.asciidoc[tag=reg-config]

++++
  </div>
</div>
++++

Any tabbed widgets on the same page and with the same name will sync tabs when switched

Only one tab should have aria-selected set to true. This tab will be selected by default

The button.aria-controls value must match the div.id value of its corresponding content bucket

The button.id value must match the div.aria-labelledby value of its corresponding content bucket

All unselected tabs must have a tabindex of -1

content.asciidoc

// tag::central-config[]
This is where the content for tab #1 goes.
// end::central-config[]

// tag::reg-config[]
This is the content for tab #2 goes.
// end::reg-config[]
« Controlling chunking Global banners »