Tabs

<div class="aui-tabs" role="tablist">
    <ul class="nav nav-tabs">
        <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab">Tab Item 1</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab Item 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane active pt-4" role="tabpanel">
            <p class="mb-0">Content of Tab 1</p>
        </div>
        <div id="tab2" class="tab-pane fade pt-4" role="tabpanel">
            <p class="mb-0">Content of Tab 2</p>
        </div>
    </div>
</div>

<div class="navbar-expand-lg">
  <button type="button" class="aui-navbar-toggler navbar-toggler btn btn-round btn-secondary" data-toggle="collapse" data-target="#navbarList" aria-controls="navbarList" aria-expanded="false" aria-label="Toggle navigation">Menu</button>
  <div class="aui-p-tabs">
      <div id="navbarList" class="collapse navbar-collapse">
          <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item" role="presentation">
              <a class="nav-link active" data-toggle="tab" href="#ptab1" role="tab">Tab Item 1</a>
              </li>
              <li class="nav-item" role="presentation">
              <a class="nav-link" data-toggle="tab" href="#ptab2" role="tab">Tab Item 2</a>
              </li>
              <li class="nav-item" role="presentation">
              <a class="nav-link" data-toggle="tab" href="#ptab3" role="tab">Tab Item 3</a>
              </li>
              <li class="nav-item" role="presentation">
              <a class="nav-link" data-toggle="tab" href="#ptab4" role="tab">Tab Item 4</a>
              </li>
          </ul>
      </div>
      <div class="tab-content">
          <div id="ptab1" class="tab-pane active pt-4" role="tabpanel">
              <p class="mb-0">Content of Tab 1</p>
          </div>
          <div id="ptab2" class="tab-pane fade pt-4" role="tabpanel">
              <p class="mb-0">Content of Tab 2</p>
          </div>
          <div id="ptab3" class="tab-pane fade pt-4" role="tabpanel">
              <p class="mb-0">Content of Tab 3</p>
          </div>
          <div id="ptab4" class="tab-pane fade pt-4" role="tabpanel">
              <p class="mb-0">Content of Tab 4</p>
          </div>
      </div>
  </div>
</div>

<div class="d-flex flex-wrap aui-accordion-tab" id="measuesTabs" role="tablist">
<button class="aui-acc-tab-item aui-accordion-tab1 btn btn-text" data-toggle="collapse" data-target="#data" aria-expanded="true" role="tab">
  Enter Data
  <i class="aha-icon-arrow-down mx-2 d-inline-block d-md-none"></i>
</button>
<button class="aui-acc-tab-item aui-accordion-tab2 btn btn-text" data-toggle="collapse" data-target="#spreadsheet" aria-expanded="false" role="tab">
  Upload Spreadsheet
  <i class="aha-icon-arrow-down mx-2 d-inline-block d-md-none"></i>
</button>
<div id="data" class="collapse show row w-100 no-gutters aui-accordion-content aui-accordion-content1 pt-4" data-parent="#measuesTabs" role="tabpanel">
    Content 1
  
</div>
<div id="spreadsheet" class="collapse row w-100 no-gutters aui-accordion-content aui-accordion-content2 pt-4" data-parent="#measuesTabs" role="tabpanel">
    Content 2
</div>
</div>

<div class="row aui-vertical-tabs no-gutters">
    <div id="tabs" class="col-4 col-lg-3 col-md-4 nav nav-tabs p-0" role="tablist">
        <a id="decription" href="#decription-link" class="nav-link active" data-toggle="tab" role="tab" tabindex="0">
            Description
        </a>
        <a id="specification" href="#specification-link" class="nav-link" data-toggle="tab" role="tab" tabindex="-1">
            Product Specification
        </a>
        <a id="audience" href="#audience-link" class="nav-link" data-toggle="tab" role="tab" tabindex="-1">
            Audience
        </a>
    </div>
    <div id="content" class="col-12 col-md-7 col-lg-8 tab-content p-0" tabindex="0">
        <div id="decription-link" class="card aui-vertical-card tab-pane fade show active" role="tabpanel" aria-labelledby="decription">
            <div class="card-header justify-content-between" id="decription-heading">
                <a class="header-title collapsed" data-toggle="collapse" href="#dec-heading-link" data-parent="#content" aria-expanded="false" aria-controls="dec-heading-link" aria-hidden="true">
                    Description<i class="aui-down-dir-icon aha-icon-down-dir"></i>
                </a>
            </div>
            <div id="dec-heading-link" class="collapse aui-vertical-collapse" aria-labelledby="decription-heading" role="region">
                <div class="card-body">
                    <h4 class="title d-none d-md-block d-lg-block" aria-hidden="true">
                        Description
                    </h4>
                    <div class="card-body-content">
                        <p class="card-content">
                            The 2020 AHA Guidelines Science In-Service is an online course designed to provide healthcare providers information on new science and key changes published in the 2020 AHA Guidelines for CPR and ECC.
                        </p>
                        <p class="card-content">
                            This interactive, self-paced, multidisciplinary course offers a full overview of resuscitation science changes impacting basic, advanced, and pediatric life support. The course highlights science and guidelines
                            recommendations that are most significant or those that will result in changes in resuscitation practice and protocols. It also provides rationale for the recommendations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="specification-link" class="card aui-vertical-card tab-pane fade" role="tabpanel" aria-labelledby="specification">
            <div class="card-header justify-content-between" id="specification-heading">
                <a class="header-title collapsed" data-toggle="collapse" href="#specification-heading-link" data-parent="#content" aria-expanded="false" aria-controls="specification-heading-link" aria-hidden="true">
                    Product Specification
                    <i class="aui-down-dir-icon aha-icon-down-dir"></i>
                </a>
            </div>
            <div id="specification-heading-link" class="collapse aui-vertical-collapse" aria-labelledby="specification-heading" role="region">
                <div class="card-body">
                    <h4 class="title d-none d-md-block d-lg-block" aria-hidden="true">
                        Specification
                    </h4>
                    <div class="card-body-content">
                        <p class="card-content">
                            The 2020 AHA Guidelines Science In-Service is an online course designed to provide healthcare providers information on new science and key changes published in the 2020 AHA Guidelines for CPR and ECC.
                        </p>
                        <p class="card-content">
                            This interactive, self-paced, multidisciplinary course offers a full overview of resuscitation science changes impacting basic, advanced, and pediatric life support. The course highlights science and guidelines
                            recommendations that are most significant or those that will result in changes in resuscitation practice and protocols. It also provides rationale for the recommendations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="audience-link" class="card aui-vertical-card tab-pane fade" role="tabpanel" aria-labelledby="audience">
            <div class="card-header justify-content-between" id="audience-heading">
                <a class="header-title collapsed" data-toggle="collapse" href="#audience-heading-link" data-parent="#content" aria-expanded="false" aria-controls="audience-heading-link" aria-hidden="true">
                    Audience<i class="aui-down-dir-icon aha-icon-down-dir"></i>
                </a>
            </div>
            <div id="audience-heading-link" class="collapse aui-vertical-collapse" aria-labelledby="audience-heading" role="region">
                <div class="card-body">
                    <h4 class="title d-none d-md-block d-lg-block" aria-hidden="true">
                        Audience
                    </h4>
                    <div class="card-body-content">
                        <p class="card-content">
                            The 2020 AHA Guidelines Science In-Service is an online course designed to provide healthcare providers information on new science and key changes published in the 2020 AHA Guidelines for CPR and ECC.
                        </p>
                        <p class="card-content">
                            This interactive, self-paced, multidisciplinary course offers a full overview of resuscitation science changes impacting basic, advanced, and pediatric life support. The course highlights science and guidelines
                            recommendations that are most significant or those that will result in changes in resuscitation practice and protocols. It also provides rationale for the recommendations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="aui-global-nav">
  <div class="aui-menu-tabs">
      <div class="aui-menu-tabs-container">
      <div class="navbar-expand-lg">
          <div class="d-flex flex-row-reverse aui-global-menubtn">
          <button
              type="button"
              class="navbar-toggler btn btn-round btn-secondary"
              data-toggle="collapse"
              data-target="#dashboardItems"
              aria-controls="navbarDashboard"
              aria-expanded="false"
              aria-label="Toggle navigation"
          >
              Menu
          </button>
          </div>
          <nav id="navbarDashboard">
          <ul
              id="dashboardItems"
              class="collapse navbar-collapse aui-global-menu"
              role="menu"
          >
              <li role="menuitem">
                  <a href="#" class="btn btn-text"
                  role="button"
                  aria-label="dashboard">
              
                  Dashboard
              </a>
              </li>
              <li class="active" role="menuitem">
              <button type="button" class="btn btn-text">
                  Facilities Registered
              </button>
              </li>
          </ul>
          </nav>
      </div>
      </div>
  </div>
</div>

<div class="d-flex flex-wrap aui-accordion-tab2" id="tabsTemplate1" role="tablist">
  <button class="aui-acc-tab-item aui-accordion-tab1 btn btn-text" data-toggle="collapse" data-target="#tabsTemplate11" aria-expanded="true" role="tab">
  Programs Registered
    <i class="aha-icon-arrow-down mx-2 d-inline-block d-md-none"></i>
  </button>
  <button class="aui-acc-tab-item aui-accordion-tab2 btn btn-text" data-toggle="collapse" data-target="#tabsTemplate12" aria-expanded="false" role="tab">
  All Programs
    <i class="aha-icon-arrow-down mx-2 d-inline-block d-md-none"></i>
  </button>
  <div id="tabsTemplate11" class="collapse show row w-100 no-gutters aui-accordion-content aui-accordion-content1 pt-4" data-parent="#tabsTemplate1" role="tabpanel">
      Content 1
    
  </div>
  <div id="tabsTemplate12" class="collapse row w-100 no-gutters aui-accordion-content aui-accordion-content2 pt-4" data-parent="#tabsTemplate1" role="tabpanel">
      Content 2
  </div>
</div>

<div class="d-flex flex-column flex-md-row flex-wrap aui-accordion-arrowtab" id="arrowTabs" role="tablist">
<button class="aui-acc-arrowtab-item aui-acc-arrtab-z1 aui-accordion-arrowtab1" data-toggle="collapse" data-target="#tabItem1" aria-expanded="true" role="tab">
    <span class="aui-acc-arrowtab-btn">
        <span class="btn btn-text aui-acc-arrowtab-text">
        Facility Details
        <i class="aha-icon-arrow-down aui-acc-dropicon mx-2 d-inline-block d-md-none"></i>
        </span>
    </span>
</button>
<button class="aui-acc-arrowtab-item aui-acc-arrtab-z2 aui-accordion-arrowtab2" data-toggle="collapse" data-target="#tabItem2" aria-expanded="false" role="tab">
    <span class="aui-acc-arrowtab-btn">
        <span class="btn btn-text aui-acc-arrowtab-text">
            Program Details
        <i class="aha-icon-arrow-down aui-acc-dropicon mx-2 d-inline-block d-md-none"></i>
        </span>
    </span>
</button>
<button class="aui-acc-arrowtab-item aui-acc-arrtab-z3 aui-accordion-arrowtab3" data-toggle="collapse" data-target="#tabItem3" aria-expanded="false" role="tab">
    <span class="aui-acc-arrowtab-btn">
        <span class="btn btn-text aui-acc-arrowtab-text">
            Billing Details
        <i class="aha-icon-arrow-down aui-acc-dropicon mx-2 d-inline-block d-md-none"></i>
        </span>
    </span>
</button>
<button class="aui-acc-arrowtab-item aui-acc-arrtab-z4 aui-accordion-arrowtab4" data-toggle="collapse" data-target="#tabItem4" aria-expanded="false" role="tab">
    <span class="aui-acc-arrowtab-btn">
        <span class="btn btn-text aui-acc-arrowtab-text">
            Payment Details
        <i class="aha-icon-arrow-down aui-acc-dropicon mx-2 d-inline-block d-md-none"></i>
        </span>
    </span>
</button>
<button class="aui-acc-arrowtab-item aui-acc-arrtab-z5 aui-accordion-arrowtab5" data-toggle="collapse" data-target="#tabItem5" aria-expanded="false" role="tab">
    <span class="aui-acc-arrowtab-btn">
        <span class="btn btn-text aui-acc-arrowtab-text">
            Agreement Details
        <i class="aha-icon-arrow-down aui-acc-dropicon mx-2 d-inline-block d-md-none"></i>
        </span>
    </span>
</button>

<div id="tabItem1" class="collapse show aui-accordion-arrowcontent aui-acc-arrc1" data-parent="#arrowTabs" role="tabpanel">
Facility Details Content
  
</div>
<div id="tabItem2" class="collapse aui-accordion-arrowcontent aui-acc-arrc2" data-parent="#arrowTabs" role="tabpanel">
Program Details Content
</div>
<div id="tabItem3" class="collapse aui-accordion-arrowcontent aui-acc-arrc3" data-parent="#arrowTabs" role="tabpanel">
Billing Details Content
</div>
<div id="tabItem4" class="collapse aui-accordion-arrowcontent aui-acc-arrc4" data-parent="#arrowTabs" role="tabpanel">
Payment Details Content
</div>
<div id="tabItem5" class="collapse aui-accordion-arrowcontent aui-acc-arrc5" data-parent="#arrowTabs" role="tabpanel">
Agreement Details Content
</div>
</div>

<div class="aui-dark-nav">
  <div class="aui-dark-nav-tabs">
    <div class="aui-dark-nav-container">
      <div class="navbar-expand-lg">
        <div class="d-flex flex-row-reverse aui-dark-nav-menubtn">
          <button
            type="button"
            class="navbar-toggler aha-icon-hamburger-round"
            data-toggle="collapse"
            data-target="#facItems"
            aria-controls="navbarDashboard"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
          </button>
        </div>
        <div id="navbarDashboard">
          <ul
            id="facItems"
            class="collapse navbar-collapse aui-dark-nav-menu"
            role="menu"
          >
            <li
              role="menuitem"
              class="active"
            >
              <a
                href="#"
                role="button"
              >
                Details
              </a>
            </li>
            <li
              role="menuitem"
            >
              <a
                href="#"
                role="button"
              >
                Measures
              </a>
            </li>
            <li
              role="menuitem"
            >
              <a
                href="#"
                role="button"
              >
                Documents
              </a>
            </li>
            <li
              role="menuitem"
            >
              <a
                href="#"
                role="button"
              >
                Certificate
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>