Tabs

Section 01
Section 02
Section 03
Section 04
Section 05
Section 06

Section 01

#1 Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Vestibulum sit amet ipsum lacus. Suspendisse potenti.

Section 02

#2 Fusce ac sodales magna. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Suspendisse. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Fusce ac sodales magna. Potenti et eros sed justo commodo bibendum non at nunc.

Section 03

#3 Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Vestibulum sit amet ipsum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti H₂0.

Section 04

#4 Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti H₂0.

Section 05

#5 Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti H₂0.

Section 06

#6 Potenti et eros sed justo commodo bibendum non at nunc. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla auctor eleifend turpis consequat pharetra.

Suspendisse potenti. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti H₂0.

Code

Tabs have the following dependencies:

Pattern Library icon stylesheet: cicon-style.css (found in cicon-package.zip above)
Pattern Library core stylesheet: coc-basic-style.css
jQuery: jquery-2.2.4.min.js
coc-accordion-tabs.js

Note: coc-accordion-tabs.js must be included onto your page and tabsAccordionUI(); must be called in order for the tabs to be styled.


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>
<script type="text/javascript">
    tabsAccordionUI();
</script>

<section id="tab-interface" class="cui">
    <div class="tab-interface">

        <ul class="tab-ul">
            <li><a href="#section1" class="tab-link">Section 1</a></li>
            <li><a href="#section2" class="tab-link">Section 2</a></li>
            <li><a href="#section3" class="tab-link">Section 3</a></li>
        </ul>

        <div class="collapsible-tab cui">
            <div id="panel-container">
                <h3 class="title-bar">Section 1</h3>
                <div id="section1" class="tab-content">
	                <p>Content for section 1</p>
                </div>

                <h3 class="title-bar">Section 2</h3>
                <div id="section2" class="tab-content">
                    <p>Content for section 2</p>
                </div>

                <h3 class="title-bar">Section 3</h3>
                <div id="section3" class="tab-content">
                    <p>Content for section 3</p>
                </div>
            </div><!-- End of .panel-container -->
        </div><!-- End of .collapsible-tab -->

    </div><!-- End of .tab-interface -->
</section><!-- End of #tab-interface -->

Usage

Tabs provides the ability to display grouped content. A tab label describes the tab’s associated group of content. The tabs transform to accordions for smaller (mobile) screens.

The tab label character limits will change based on number of tabs. Do not use more than 6 tabs, otherwise the styles will become messed up.

If 2 tabs have been used, the tab label character limitation is 30 characters
If 3 tabs have been used, the tab label character limitation is 20 characters
If 4 tabs have been used, the tab label character limitation is 15 characters
If 5 tabs have been used, the tab label character limitation is 12 characters
If 6 tabs have been used, the tab label character limitation is 10 characters

Accessibility

The tab pattern is based on the ARIA works by Heydon Pickering http://heydonworks.com/practical_aria_examples/