{{!--<div class="site-example--content slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
{{#aljs-pre-container type="html"}}
<div class="slds-tabs--default" data-aljs="tabs">
    <ul class="slds-tabs--default__nav" role="tablist">
        <li class="slds-tabs--default__item slds-text-heading--label" title="Item One" role="presentation"><a class="slds-tabs--default__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" data-aljs-show="tab-default-1">Item One</a></li>
        <li class="slds-tabs--default__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--default__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" data-aljs-show="tab-default-2">Item Two</a></li>
        <li class="slds-tabs--default__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--default__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" data-aljs-show="tab-default-3">Item Three</a></li>
    </ul>
    <div id="tab-default-1" class="slds-tabs--default__content slds-hide" role="tabpanel">
        <h2>Item One Content</h2>
    </div>
    <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel">
        <h2>Item Two Content</h2>
    </div>
    <div id="tab-default-3" class="slds-tabs--default__content slds-hide" role="tabpanel">
        <h2>Item Three Content</h2>
    </div>
</div>
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table gives you a quick overview of ALJS-specific markup applied to the SLDS component.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">ALJS Markup</th>
                        <th scope="col">Outcome</th>
                        <th scope="col">Required</th>
                        <th scope="col">Applied to</th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>data-aljs="tabs"</code></th>
                        <td data-label="Outcome">Provides a unique identifier for the plugin</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-tabs--default</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-show="</code><em>tab-id</em><code>"</code></th>
                        <td data-label="Outcome">Assigns the role of showing the specified tab id on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-tabs--{variant}__item</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="tabs"]').tabs();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="tabs"]').tabs({
        defaultTabId: '',
        onChange: function(obj) {}
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the options available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Default value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>defaultTabId</code></th>
                        <td data-label="Behavior">Specifies which tab will be initially selected on page load</td>
                        <td data-label="Accepted values">Any tab id selector</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>''</code> (Defaults to the first tab if empty)</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onChange</code></th>
                        <td data-label="Behavior">Calls a function when a tab changes</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Events</h4>
        <p>This table details the JavaScript events that trigger from user interaction.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Event</th>
                        <th scope="col">Element</th>
                        <th scope="col">Trigger</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>selected.aljs.tab</code></th>
                        <td data-label="Element">The selected <code>.slds-tabs--{variant}__item</code></td>
                        <td data-label="Trigger">A tab is clicked</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>shown.aljs.tabcontent</code></th>
                        <td data-label="Element">The <code>.slds-tabs--{variant}__content</code> being shown</td>
                        <td data-label="Trigger">A tab is clicked</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}