Tabs Accordion

Expandable Tab component that organizes different types of content, with up to 8 tabs and easy switching between different views.

content

Demo

Multiple tabs with accordion

Clicking on the tab above will expand the content below.

Tab 1 Title

Tab 2 Title

Tab 3 Title

Tab 4 Title

Image name

Content Title 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More

Tab 5 Title

Tab 6 Title

Tab 7 Title

Tab 8 Title

Image name

Content Title 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 7

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More
Image name

Content Title 8

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

View More View More 
<div class="adv-expander-items-group">
  <div class="module adv-expander-items expander-items-light clearfix">
    <div class="expander-title active">
      <h3 aria-label="Item Title 001"> Tab 1 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 002"> Tab 2 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 003"> Tab 3 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 004"> Tab 4 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="items-repository">
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 1</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 2</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 3</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 4</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="module adv-expander-items expander-items-light clearfix">
    <div class="expander-title">
      <h3 aria-label="Item Title 005"> Tab 5 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 006"> Tab 6 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 007"> Tab 7 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="expander-title">
      <h3 aria-label="Item Title 008"> Tab 8 Title </h3>
      <i class="fal fa-angle-down"></i> </div>
    <div class="items-repository">
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 5</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 6</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 7</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">View More</a> </div>
          </div>
        </div>
      </div>
      <div class="adv-expander-items-container">
        <div class="module adv-jumbotron expander-item animated">
          <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">
            <h3>Content Title 8</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <div class="adv-jumbotron-btns"> <a href="#" target="_blank" class="btn btn-primary">View More</a> <a href="#" target="_blank" class="btn btn-secondary">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/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-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/horizontal-tab-group.js"></script>

content