<div is="tab-list">
<button aria-controls="tab-11">Tab 1.1</button>
<button aria-controls="tab-12">Tab 1.2</button>
<button aria-controls="tab-13">Tab 1.3</button>
</div>
<div id="tab-11" hidden>
<p>Testing horizontal tab list. First tab selected by default.
</div>
<div id="tab-12" hidden>Content 1.2</div>
<div id="tab-13" hidden>Content 1.3</div>
Testing horizontal tab list. First tab selected by default.
<div is="tab-list" aria-orientation="vertical">
<button aria-controls="tab-21">Tab 2.1</button>
<button aria-controls="tab-22" aria-selected="true">Tab 2.2</button>
<button aria-controls="tab-23">Tab 2.3</button>
</div>
<div id="tab-21" hidden>Content 2.1</div>
<div id="tab-22" hidden>
<p>Testing vertical tab list. Second tab selected by default.
</div>
<div id="tab-23" hidden>Content 2.3</div>
Testing vertical tab list. Second tab selected by default.