The Tab component c-tabs relies on the NypTab JavaScript plugin, which utilizes its own behavior and controls for the Tab but proxies and uses the
Collapse component for the mobile collapse functionality.
Accessibility
Pay close attention to the roles and aria attributes present across the Tab and Collapse component elements.
Content Section One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor.
- Duis aute irure dolor in prehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
Content Section Two
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Content Section Three
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Our Top Cardiologists Explain Transcatheter Aoritic Valve Replacement
TAVR is a transformational new treatment for managing patients with aortic stenosis, a common heart valve disease.
<div class="c-tabs">
<ul id="tabs--default" class="c-tabs__list u-d-none@md-max nav" role="tablist">
<li class="c-tabs__item" role="presentation">
<a id="tab-base-1" class="c-tabs__tab active" data-toggle="collapseTab" data-role="tab" href="#collapse-tab-1" role="tab" aria-controls="collapse-tab-1" aria-selected="true">
Content Section One
</a>
</li>
<li class="c-tabs__item" role="presentation">
<a id="tab-base-2" class="c-tabs__tab" data-toggle="collapseTab" data-role="tab" href="#collapse-tab-2" role="tab" aria-controls="collapse-tab-2" aria-selected="false">
Content Section Two
</a>
</li>
<li class="c-tabs__item" role="presentation">
<a id="tab-base-3" class="c-tabs__tab" data-toggle="collapseTab" data-role="tab" href="#collapse-tab-3" role="tab" aria-controls="collapse-tab-3" aria-selected="false">
Content Section Three
</a>
</li>
</ul>
<div id="tabs-base-content" class="c-tabs__content">
<section class="c-collapse show active" role="tabpanel" data-child="collapse-tab-1" aria-labelledby="tab-base-1">
<p class="u-m-b-0 u-d-none@md">
<a href="#collapse-tab-1" class="c-collapse__button" data-toggle="collapseTab" data-role="collapse" aria-controls="collapse-tab-1" aria-expanded="true">
Content Section One
</a>
</p>
<div id="collapse-tab-1" class="c-collapse__collapse collapse show" data-parent="#tabs--default">
<div class="c-collapse__content">
...
</div>
</div>
</section>
<section class="c-collapse fade u-d-block@md-max" role="tabpanel" data-child="collapse-tab-2" aria-labelledby="tab-base-2">
<p class="u-m-b-0 u-d-none@md">
<a href="#collapse-tab-2" class="c-collapse__button" data-toggle="collapseTab" data-role="collapse" aria-controls="collapse-tab-2" aria-expanded="false">
Content Section Two
</a>
</p>
<div id="collapse-tab-2" class="c-collapse__collapse collapse" data-parent="#tabs--default">
<div class="c-collapse__content">
...
</div>
</div>
</section>
<section class="c-collapse fade u-d-block@md-max" role="tabpanel" data-child="collapse-tab-3" aria-labelledby="tab-base-3">
<p class="u-m-b-0 u-d-none@md">
<a href="#collapse-tab-3" class="c-collapse__button" data-toggle="collapseTab" data-role="collapse" aria-controls="collapse-tab-3" aria-expanded="false">
Content Section Three
</a>
</p>
<div id="collapse-tab-3" class="c-collapse__collapse collapse" data-parent="#tabs--default">
<div class="c-collapse__content">
...
</div>
</div>
</section>
</div>
</div>