Tabs
Note: the .bswift-tabs container matters. Global script uses this to swap content based on tab selection.
Please see the web forms user control located at \Website\controls\Tabs.ascx for backend usages
Default
Most often used in Admin pages and in Medicare Enrollment (MCIX and Group) as the main tab. Does not refresh anything outside of the container.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="tabs-default">
<ul class="" role="tablist" aria-owns="tabD_01 tabD_02 tabD_03 tabD_04">
<li class="selected" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="page" aria-controls="tabD_Content01" id="tabD_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabD_Content02" id="tabD_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabD_Content03" id="tabD_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabD_Content04" id="tabD_04">Tab Label 4</a>
</li>
</ul>
</div>
<!--Tab Content, see how it relates to the tab link-->
<div class="row" id="tabD_Content01" role="tabpanel" aria-labelledby="tabD_01">Tab Label 1 Content</div>
<div class="row hidden" id="tabD_Content02" role="tabpanel" aria-labelledby="tabD_02">Tab Label 2 Content</div>
<div class="row hidden" id="tabD_Content03" role="tabpanel" aria-labelledby="tabD_03">Tab Label 3 Content</div>
<div class="row hidden" id="tabD_Content04" role="tabpanel" aria-labelledby="tabD_04">Tab Label 4 Content</div>
</div>
Simple
Nested tab: Orange underline
Nested tab style used in conjunction with the default tab.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="tabs-simple tabs-orange">
<ul class="" role="tablist" aria-owns="tabS_01 tabS_02 tabS_03 tabS_04"">
<li class="current" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="page" aria-controls="tabS_Content01" id="tabS_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS_Content02" id="tabS_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS_Content03" id="tabS_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS_Content04" id="tabS_04">Tab Label 4</a>
</li>
</ul>
</div>
<!--Tab Content, see how it relates to the tab link-->
<div class="row" id="tabS_Content01" role="tabpanel" aria-labelledby="tabS_01">Tab Label 1 Content</div>
<div class="row hidden" id="tabS_Content02" role="tabpanel" aria-labelledby="tabS_02">Tab Label 2 Content</div>
<div class="row hidden" id="tabS_Content03" role="tabpanel" aria-labelledby="tabS_03">Tab Label 3 Content</div>
<div class="row hidden" id="tabS_Content04" role="tabpanel" aria-labelledby="tabS_04">Tab Label 4 Content</div>
</div>
Contained Main/Nested tab: Blue underline with larger text
Used within a modal or a container, with or without the default tab. Can function as a the main tab or a nested tab (with the default tab). Mobile first option.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="tabs-simple tabs-blue tabs-large mb-jumbo">
<ul class="" role="tablist" aria-owns="tabS1_01 tabS1_02 tabS1_03 tabS1_04"">
<li class="current" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="page" aria-controls="tabS1_Content01" id="tabS1_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS1_Content02" id="tabS1_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS1_Content03" id="tabS1_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS1_Content04" id="tabS1_04">Tab Label 4</a>
</li>
</ul>
</div>
<!--Tab Content, see how it relates to the tab link-->
<div class="row" id="tabS1_Content01" role="tabpanel" aria-labelledby="tabS1_01">Tab Label 1 Content</div>
<div class="row hidden" id="tabS1_Content02" role="tabpanel" aria-labelledby="tabS1_02">Tab Label 2 Content</div>
<div class="row hidden" id="tabS1_Content03" role="tabpanel" aria-labelledby="tabS1_03">Tab Label 3 Content</div>
<div class="row hidden" id="tabS1_Content04" role="tabpanel" aria-labelledby="tabS1_04">Tab Label 4 Content</div>
</div>
Ask Emma/Enrollment variant
Has a background and border-top to differentiate from Ask Emma FAQ accordions.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="mb-jumbo p-larger">
<div class="tabs-simple tabs-blue tabs-large tabs-enrollment-variant tabs-hover-dark">
<ul class="" role="tablist" aria-owns="tabS2_01 tabS2_02 tabS2_03 tabS2_04"">
<li class="current" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="page" aria-controls="tabS2_Content01" id="tabS2_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS2_Content02" id="tabS2_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS2_Content03" id="tabS2_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabS2_Content04" id="tabS2_04">Tab Label 4</a>
</li>
</ul>
</div>
</div>
<!--Tab Content, see how it relates to the tab link-->
<div class="row" id="tabS2_Content01" role="tabpanel" aria-labelledby="tabS2_01">Tab Label 1 Content</div>
<div class="row hidden" id="tabS2_Content02" role="tabpanel" aria-labelledby="tabS2_02">Tab Label 2 Content</div>
<div class="row hidden" id="tabS2_Content03" role="tabpanel" aria-labelledby="tabS2_03">Tab Label 3 Content</div>
<div class="row hidden" id="tabS2_Content04" role="tabpanel" aria-labelledby="tabS2_04">Tab Label 4 Content</div>
</div>
Wizard
Indicates a linear flow.
If this is actually used as a wizard, use aria-current="step" on currently selected link.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="tabs-wizard mb-jumbo">
<ul class="" role="tablist" aria-owns="tabW_01 tabW_02 tabW_03 tabW_04">
<li class="selected current" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="step" aria-controls="tabW_Content01" id="tabW_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW_Content02" id="tabW_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW_Content03" id="tabW_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW_Content04" id="tabW_04">Tab Label 4</a>
</li>
</ul>
</div>
<div class="row" id="tabW_Content01" role="tabpanel" aria-labelledby="tabW_01" >Tab Label 1 Content</div>
<div class="row hidden" id="tabW_Content02" role="tabpanel" aria-labelledby="tabW_02" >Tab Label 2 Content</div>
<div class="row hidden" id="tabW_Content03" role="tabpanel" aria-labelledby="tabW_03" >Tab Label 3 Content</div>
<div class="row hidden" id="tabW_Content04" role="tabpanel" aria-labelledby="tabW_04" >Tab Label 4 Content</div>
</div>
Main Navigation Wizard Variant
Used as the main navigation in Exchange Application and Prequote.
Tab Label 1 Content
HTML
<div class="bswift-tabs">
<div class="bg-gray-lighter bsw-y bc-gray-dark px-jumbo">
<div class="tabs-wizard tabs-large bsw-none">
<ul class="" role="tablist" aria-owns="tabW2_01 tabW2_02 tabW2_03 tabW2_04">
<li class="selected current" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="1" aria-setsize="4" aria-expanded="true" aria-selected="true" aria-current="step" aria-controls="tabW2_Content01" id="tabW2_01">Tab Label 1</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="2" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW2_Content02" id="tabW2_02">Tab Label 2</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="3" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW2_Content03" id="tabW2_03">Tab Label 3</a>
</li>
<li class="" role="presentation">
<a href="javascript:void(0)" role="tab" aria-posinset="4" aria-setsize="4" aria-expanded="false" aria-selected="false" aria-controls="tabW2_Content04" id="tabW2_04">Tab Label 4</a>
</li>
</ul>
</div>
</div>
<div class="row" id="tabW2_Content01" role="tabpanel" aria-labelledby="tabW2_01" >Tab Label 1 Content</div>
<div class="row hidden" id="tabW2_Content02" role="tabpanel" aria-labelledby="tabW2_02" >Tab Label 2 Content</div>
<div class="row hidden" id="tabW2_Content03" role="tabpanel" aria-labelledby="tabW2_03" >Tab Label 3 Content</div>
<div class="row hidden" id="tabW2_Content04" role="tabpanel" aria-labelledby="tabW2_04" >Tab Label 4 Content</div>
</div>