<!-- SASS: src/stylesheets/_components/tabs.scss -->
<!-- JS: src/js/tabs.js -->
<!-- Vendor JS: src/js/_vendor/flexmenu.js -->

<div class="vaux-tabs-wrapper" data-tabs-trigger data-tabs-mobile="bm1">
    <ul class="vaux-tabs-nav" data-tabs-navigation role="tablist">
        <li class="vaux-current-tab" role="tab" aria-selected="true"><a href="#five" id="testFive" aria-controls="five">Section One</a></li>
        <li role="tab" aria-selected="false"><a href="#six" id="testSix" aria-controls="six">Section Two</a></li>
        <li role="tab" aria-selected="false"><a href="#seven" id="testSeven" aria-controls="seven">Section Three</a></li>
        <li role="tab" aria-selected="false"><a href="#eight" id="testEight" aria-controls="eight">Section Four</a></li>
        <li role="tab" aria-selected="false"><a href="#twelve" id="testTwelve" aria-controls="twelve">Section Five</a></li>
    </ul>

    <div id="five" class="vaux-tabs-section vaux-current-tab" role="tabpanel" aria-hidden="false" tabindex="0" aria-labelledby="testFive">
        <h3>This is section one.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum vitae eos eligendi dolorem laudantium minima in eum sunt unde quos?</p>
        <button>Button</button>
    </div>

    <div id="six" class="vaux-tabs-section" role="tabpanel" aria-hidden="true" tabindex="0" aria-labelledby="testSix">
        <h3>This is section two.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, dolore molestias dolores provident veritatis totam laudantium reprehenderit illum quibusdam atque!</p>
        <a href="#">Link</a>
    </div>

    <div id="seven" class="vaux-tabs-section" role="tabpanel" aria-hidden="true" tabindex="0" aria-labelledby="testSeven">
        <h3>This is section three.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ratione nemo rerum, corrupti voluptatum expedita ipsam neque earum cum sunt.</p>
        <button>Button</button>
        <a href="#">Link</a>
    </div>

    <div id="eight" class="vaux-tabs-section" role="tabpanel" aria-hidden="true" tabindex="0" aria-labelledby="testEight">
        <h3>This is section four.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ratione nemo rerum, corrupti voluptatum expedita ipsam neque earum cum sunt.</p>
    </div>

    <div id="twelve" class="vaux-tabs-section" role="tabpanel" aria-hidden="true" tabindex="0" aria-labelledby="testTwelve">
        <h3>This is section five.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ratione nemo rerum, corrupti voluptatum expedita ipsam neque earum cum sunt.</p>
    </div>

</div>