Tabs

Example: Tabs

Level I

This is a test section

Level II

This is a test section

Level III

This is a test section

Code

HTML

<section class="grid-container">
    <div class="tab-group full-width">
        <form class="tab-group-tabs-form">
            <label class="control-label" for="tab-group-tabs-dropdown">Tabs Title</label>
            <div id="tab-group-tabs-dropdown" class="form-group">
                <select class="form-control tab-group-tabs-form-select" aria-describedby="select-list-control-label">
                    <option value="#leveli">Level I</option>
                    <option value="#levelii">Level II</option>
                    <option value="#leveliii">Level III</option>
                </select>
            </div>
        </form>
        <ul class="tab-group-tabs">
            <li class="tab-group-tabs-item-title active"><a data-toggle="tab" href="#leveli">Level I</a></li>
            <li class="tab-group-tabs-item-title"><a data-toggle="tab" href="#levelii">Level II</a></li>
            <li class="tab-group-tabs-item-title"><a data-toggle="tab" href="#leveliii">Level III</a></li>
        </ul>
        <div class="tab-content tab-group-content">
            <noscript>
                <style>
                    .tab-content > .tab-pane {
                        display: block;
                        opacity: 1;
                    }
                </style>
            </noscript>
            <section id="leveli" class="tab-pane fade in active">
                <h2>Level I</h2>
                <p>This is a test section</p>
            </section>
            <section id="levelii" class="tab-pane fade">
                <h2>Level II</h2>
                <p>This is a test section</p>
            </section>
            <section id="leveliii" class="tab-pane fade">
                <h2>Level III</h2>
                <p>This is a test section</p>
            </section>
        </div>
    </div>
</section>
        

Documentation

Problem Being Solved

Similar content is grouped into specific categories, to allow the user to view only the content that applies to them.

When To Use

It can be used when content can naturally be grouped into a small number of categories, and any given user would only need to view one or two categories. For example, it can be used for content about exam levels.

When Not To use

It should not be used for more than 4 categories of content, or to group unrelated content.

Formatting

  • Place tab-group in a section that has the class name "grid-container"
  • Make sure to include the <noscript> tag section right inside the tab-content/tab-group-content section so that if JavaScript doesn't load, all of the tab content sections will display.
  • Make sure value for each select option is the id of the related tab.

Example: Navigation Tabs

Overview Header

This is a test section

Speakers Header

This is a test section

Agenda Header

This is a test section

Location Header

This is a test section

Pricing Header

This is a test section

Sponsors Header

This is a test section

Event Info Header

This is a test section

Code

HTML


        

Documentation

Problem Being Solved

Users need to navigate between sections of long content.

When To Use

It can be used when long content needs to be broken into smaller chunks to be easily navigated and understood. It can be used to provide a layer of sub-navigation within a website. Currently it can only be used in the Conference structure.

When Not To use

It should not be used outside the Conference structure.

Formatting

  • Make sure to include the <noscript> tag section right inside the tab-content/tab-group-content section so that if JavaScript doesn't load, all of the tab content sections will display.