Tabs

Example: Prospects 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

When To Use

When Not To use

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: Enterprise 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

When To Use

When Not To use

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.