Horizontal Tab

The tab component is used to hide content behind selectable tabs. These tabs are typically arranged horizontally at the top.

content

Demo

A basic horizontal tab

<div id="horizontal-tab" class="row w-100 no-gutters">
  <div class="row-inner mw-1200 col-12 no-gutters">
    <div class="module adv-jumbotron-carousel">   
      <div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
          <h3 aria-label="Tab Header 01">Tab 01</h3>
        </div>
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4">
          <h3 aria-label="Tab Header 01">Tab 02</h3>
        </div>
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4">
          <h3 aria-label="Tab Header 03">Tab 03</h3> 
        </div>
      </div>
    </div>
    <div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
      <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 1</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
            <a href="#" class="btn btn-primary rounded-0">View more</a>
			<a href="#" class="btn btn-secondary rounded-0">View more</a>
          </div>
        </div>
      </div>
    </div>
    <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 2</h4> 
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
		    <a href="#" class="btn btn-primary rounded-0">View more</a>
            <a href="#" class="btn btn-secondary rounded-0">View more</a>
          </div>
        </div>
      </div>
    </div>
    <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 1</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
		    <a href="#" class="btn btn-primary rounded-0">View more</a>
            <a href="#" class="btn btn-secondary rounded-0">View more</a>
          </div>
        </div>
      </div>
    </div>
   </div>
  </div>
</div>

Tabs with horizontal underline Effect

<div id="horizontal-nav" class="row w-100 no-gutters">
  <div class="row-inner mw-1200 col-12 no-gutters">
    <div class="module adv-jumbotron-carousel">   
      <div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
          <h3 aria-label="Tab Header 01">Tab 01</h3>
        </div>
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4">
          <h3 aria-label="Tab Header 01">Tab 02</h3>
        </div>
        <div class="col-4 adv-jumbotron-carousel-nav col-md-4">
          <h3 aria-label="Tab Header 03">Tab 03</h3> 
        </div>
      </div>
    </div>
    <div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
      <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 1</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
            <a href="#" class="btn btn-primary rounded-0">View more</a>
			<a href="#" class="btn btn-secondary rounded-0">View more</a>
          </div>
        </div>
      </div>
    </div>
    <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 2</h4> 
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
		    <a href="#" class="btn btn-primary rounded-0">View more</a>
            <a href="#" class="btn btn-secondary rounded-0">View more</a>
          </div>
        </div>
      </div>
    </div>
    <div class="mw-1200 content">
        <div class="module adv-jumbotron expander-item animated item-content-light">
          <div class="adv-jumbotron-image">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
          </div> 
          <div class="adv-jumbotron-content">
	    <h4>Title 1</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
          <div class="adv-jumbotron-btns">
		    <a href="#" class="btn btn-primary rounded-0">View more</a>
            <a href="#" class="btn btn-secondary rounded-0">View more</a>
          </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/web/lib/jquery-owl-carousel/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/assets/owl.theme.default.min.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/horizontal-tab.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/web/lib/jquery-owl-carousel/2.2.1/owl.carousel.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/Horizontal-Tab/initHorizontalTabCarousel.js"></script>

Call the Data tables via JavaScript:

The function initHorizontalTabCarousel accepts two parameters, the ID of the carousel element (e.g., '#tab-carousel' and '#tab-carousel2') and the ID of the navigation container (e.g., '#tab-Navs' and '#tab-Navs2'). It then initializes the Owl Carousel with the specified settings.

// IInitialize Horizontal-Tab-Carousel
  initHorizontalTabCarousel('#tab-carousel','#tab-Navs');

// Initialize Horizontal-Tab-Carousel2
  initHorizontalTabCarousel('#tab-carousel2','#tab-Navs2');

content