Vertical Tab
A component that shows groups of content, separated into tabs, and controlled by the tabs
content
Demo
A basic example with vertical tab.
<div class="module adv-switch-items no-gutters switch-group" >
<div class="switch-items-nav order-last" >
<div class="switch-items-title active" >
<h4 aria-label="Tab header 1" >Tab 1 Title </h4 >
</div >
<div class="switch-items-title" >
<h4 aria-label="Tab header 2" >Tab 2 Title </h4 >
</div >
<div class="switch-items-title" >
<h4 aria-label="Tab header 3" >Tab 3 Title </h4 >
</div >
<div class="switch-items-title" >
<h4 aria-label="Tab header 4" >Tab 4 Title </h4 >
</div >
</div >
<div class="pc-container d-md-flex" >
<div class="module adv-cover-content" style="background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/design-and-manufacturing-services/vertical-solutions-tablet.jpg);">
<div class="adv-cover-content-container" >
<div class="adv-cover-content-box" >
<div class="adv-cover-content-title" >Title 1 </div >
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p >
<div class="adv-cover-content-btns light" >
<a href="/campaign/Medical-Equipment-Builder-DMS" target="_blank" class="btn btn-primary rounded-0" aria-label="view more ___ information" >View More </a >
<a href="/campaign/Medical-Equipment-Builder-DMS" target="_blank" class="btn btn-secondary rounded-0" aria-label="view more ___ information" >View More </a >
</div >
</div >
</div >
</div >
<div class="module adv-cover-content" style="background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/design-and-manufacturing-services/vertical-solutions-aiot.jpg); display: none;">
<div class="adv-cover-content-container" >
<div class="adv-cover-content-box" >
<div class="adv-cover-content-title" >Title 2 </div >
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p >
<div class="adv-cover-content-btns light" >
<a href="/campaign/aiot-appliances-dms" target="_blank" class="btn btn-primary rounded-0" aria-label="view more ___ information" >View More </a >
<a href="/campaign/Medical-Equipment-Builder-DMS" target="_blank" class="btn btn-secondary rounded-0" aria-label="view more ___ information" >View More </a >
</div >
</div >
</div >
</div >
<div class="module adv-cover-content" style="background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/design-and-manufacturing-services/Vertical_DMS.jpg); display: none;">
<div class="adv-cover-content-container" >
<div class="adv-cover-content-box" >
<div class="adv-cover-content-title" >Title 3 </div >
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p >
<div class="adv-cover-content-btns light" >
<a href="/campaign/aiot-appliances-dms" target="_blank" class="btn btn-primary rounded-0" aria-label="view more ___ information" >View More </a >
<a href="/campaign/Medical-Equipment-Builder-DMS" target="_blank" class="btn btn-secondary rounded-0" aria-label="view more ___ information" >View More </a >
</div >
</div >
</div >
</div >
<div class="module adv-cover-content" style="background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/design-and-manufacturing-services/vertical-solutions-transportation.jpg); display: none;">
<div class="adv-cover-content-container" >
<div class="adv-cover-content-box" >
<div class="adv-cover-content-title" >Title 4 </div >
<p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p >
<div class="adv-cover-content-btns light" >
<a href="/campaign/aiot-appliances-dms" target="_blank" class="btn btn-primary rounded-0" aria-label="view more ___ information" >View More </a >
<a href="/campaign/Medical-Equipment-Builder-DMS" target="_blank" class="btn btn-secondary rounded-0" aria-label="view more ___ information" >View More </a >
</div >
</div >
</div >
</div >
</div >
</div >Vertical tab group-Tab 01
Tab 1 Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Tab 2 Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Tab 3 Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Tab 4 Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="module adv-switch-items tab-group no-gutters switch-group">
<div class="switch-items-nav">
<div class="switch-items-title active" aria-label="Tab 1 header 1">
<h3>Tab 1 Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="switch-items-title" aria-label="Tab 1 header 2">
<h3>Tab 2 Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="switch-items-title" aria-label="Tab 1 header 3">
<h3>Tab 3 Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="switch-items-title" aria-label="Tab 1 header 4">
<h3>Tab 4 Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="pc-container d-md-flex">
<div class="module adv-cover-content box-1">
<div class="adv-cover-content-container">
<div class="cover-content-submenu">
<ul class="row clearfix">
<li class="col-6 col-sm-3 submenu-items active" aria-label="Tab 2 header 1"><span>Section 1</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 1"><span>Section 2</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 3 header 1"><span>Section 3</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 4 header 1"><span>Section 4</span></li>
</ul>
</div>
<div class="adv-cover-content-box p-4" style="background: url(https://design.advantech.com/demo/06-Component-UI/images/box-1-bg.jpg) no-repeat;">
<h4>Content Title A</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<div class="adv-cover-content-btns dark" aria-label="view more ___ information"> <a href="#" target="_blank"
class="btn btn-primary rounded-0">View More</a> <a href="#" target="_blank"
class="btn btn-secondary rounded-0">View More</a> </div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<div class="module adv-card-deck card-deck">
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p class="mb-1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<p class="mb-2">1/5/2021</p>
<div class="content-box-video">
<iframe src="https://www.youtube.com/embed/LpcgEqTVN4I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<h3>Lorem Ipsum </h3>
<p>It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="row">
<div class="row-inner col-md-6 col-sm-12 p-0"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="" class="img-fluid rounded-0 border"> </div>
<div adv-column="61" class="row-inner col-md-6 col-sm-12 pl-3">
<h4>Lorem Ipsum</h4>
<ul class="ml-3">
<li>Donec feugiat ex nec lobortis accumsan.</li>
<li>Donec feugiat ex nec lobortis accumsan.</li>
</ul>
<div class="adv-cover-content-btns mt-3 dark" aria-label="view more ___ information"> <a href="#" target="_blank" class="btn btn-primary rounded-0">View More</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="module adv-cover-content box-1" style="display: none;">
<div class="adv-cover-content-container">
<div class="cover-content-submenu">
<ul class="row clearfix">
<li class="col-6 col-sm-3 submenu-items active" aria-label="Tab 2 header 1"><span>Section 1</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 2"><span>Section 2</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 3"><span>Section 3</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 4"><span>Section 4</span></li>
</ul>
</div>
<div class="adv-cover-content-box p-4" style="background: url(https://design.advantech.com/demo/06-Component-UI/images/box-1-bg.jpg) no-repeat;">
<h4>Content Title B</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<div class="adv-cover-content-btns dark" aria-label="view more ___ information"> <a href="#" target="_blank"
class="btn btn-primary rounded-0">View More</a> <a href="#" target="_blank"
class="btn btn-secondary rounded-0">View More</a> </div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<div class="module adv-card-deck card-deck">
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p class="mb-1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<p class="mb-2">1/5/2021</p>
<div class="content-box-video">
<iframe src="https://www.youtube.com/embed/LpcgEqTVN4I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<h3>Lorem Ipsum</h3>
<p>It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="row">
<div class="row-inner col-md-6 col-sm-12 p-0"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="" class="img-fluid rounded-0 border"> </div>
<div adv-column="61" class="row-inner col-md-6 col-sm-12 pl-3">
<h4>Lorem Ipsum</h4>
<ul class="ml-3">
<li>Donec feugiat ex nec lobortis accumsan.</li>
<li>Donec feugiat ex nec lobortis accumsan.</li>
</ul>
<div class="adv-cover-content-btns mt-3 dark" aria-label="view more ___ information"><a href="#" target="_blank" class="btn btn-primary rounded-0">View More</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="module adv-cover-content box-1" style="display: none;">
<div class="adv-cover-content-container">
<div class="cover-content-submenu">
<ul class="row clearfix">
<li class="col-6 col-sm-3 submenu-items active" aria-label="Tab 2 header 1"><span>Section 1</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 2"><span>Section 2</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 3"><span>Section 3</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 4"><span>Section 4</span></li>
</ul>
</div>
<div class="adv-cover-content-box p-4" style="background: url(https://design.advantech.com/demo/06-Component-UI/images/box-1-bg.jpg) no-repeat;">
<h4>Content Title C</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<div class="adv-cover-content-btns dark" aria-label="view more ___ information"> <a href="#" target="_blank"
class="btn btn-primary rounded-0">View More</a> <a href="#" target="_blank"
class="btn btn-secondary rounded-0">View More</a> </div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<div class="module adv-card-deck card-deck">
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p class="mb-1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<p class="mb-2">1/5/2021</p>
<div class="content-box-video">
<iframe src="https://www.youtube.com/embed/LpcgEqTVN4I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<h3>Lorem Ipsum</h3>
<p>It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<div class="row">
<div class="row-inner col-md-6 col-sm-12 p-0"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="" class="img-fluid rounded-0 border"> </div>
<div adv-column="61" class="row-inner col-md-6 col-sm-12 pl-3">
<h4>Lorem Ipsum</h4>
<ul class="ml-3">
<li>Donec feugiat ex nec lobortis accumsan.</li>
<li>Donec feugiat ex nec lobortis accumsan.</li>
</ul>
<div class="adv-cover-content-btns mt-3 dark" aria-label="view more ___ information"><a href="#" target="_blank" class="btn btn-primary rounded-0">View More</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="module adv-cover-content box-1" style="display: none;">
<div class="adv-cover-content-container">
<div class="cover-content-submenu">
<ul class="row clearfix">
<li class="col-6 col-sm-3 submenu-items active" aria-label="Tab 2 header 1"><span>Section 1</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 2"><span>Section 2</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 3"><span>Section 3</span></li>
<li class="col-6 col-sm-3 submenu-items" aria-label="Tab 2 header 4"><span>Section 4</span></li>
</ul>
</div>
<div class="adv-cover-content-box p-4" style="background: url(https://design.advantech.com/demo/06-Component-UI/images/box-1-bg.jpg) no-repeat;">
<h4>Content Title D</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<div class="adv-cover-content-btns dark" aria-label="view more ___ information"> <a href="#" target="_blank"
class="btn btn-primary rounded-0">View More</a> <a href="#" target="_blank"
class="btn btn-secondary rounded-0">View More</a> </div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
<div class="module adv-card-deck card-deck">
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
<div class="module adv-card card"> <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
<div class="card-wrapper">
<div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="rounded-0"> </div>
<div class="card-body">
<h3 class="card-info-title">Card Item Title</h3>
<h4 class="card-subtitle">Secondary Information</h4>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="card-btn">
<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a>
</div>
</div>
</div>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<p class="mb-1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<p class="mb-2">1/5/2021</p>
<div class="content-box-video">
<iframe src="https://www.youtube.com/embed/LpcgEqTVN4I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="adv-cover-content-box" style="display: none;">
<h3>Lorem Ipsum</h3>
<p>It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="row">
<div class="row-inner col-md-6 col-sm-12 p-0"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="" class="img-fluid rounded-0 border"> </div>
<div adv-column="61" class="row-inner col-md-6 col-sm-12 pl-3">
<h4>Lorem Ipsum</h4>
<ul class="ml-3">
<li>Donec feugiat ex nec lobortis accumsan.</li>
<li>Donec feugiat ex nec lobortis accumsan.</li>
</ul>
<div class="adv-cover-content-btns mt-3 dark" aria-label="view more ___ information"><a href="#" target="_blank" class="btn btn-primary rounded-0">View More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basic Usage
Please avoid duplicating the reference to the same CSS and JS files.
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/card.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/vertical-tab-group.css">
JavaScript Instantiation
Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/vertical-tab-group-no-mb.js"></script>