{{!--<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-button-group" role="group" data-aljs="icon-group">
    <button id="icon-1" class="slds-button slds-button--icon-border slds-not-selected">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
        </svg>
        <span class="slds-assistive-text">Chart</span>
    </button>
    <button id="icon-2" class="slds-button slds-button--icon-border slds-not-selected">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
        </svg>
        <span class="slds-assistive-text">Filter List</span>
    </button>
    <button id="icon-3" class="slds-button slds-button--icon-border slds-not-selected">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
        </svg>
        <span class="slds-assistive-text">Sort</span>
    </button>
</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-dismiss="icon-group"</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-button-group</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="icon-group"]').iconGroup();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="icon-group"]').iconGroup({
        type: 'sort',
        defaultButtonId: '',
        onChange: function() {}
    });
});
{{/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>type</code></th>
                        <td data-label="Behavior">Specifies the role and behavior of the icon group</td>
                        <td data-label="Accepted values"><code>'sort'</code>, <code>'switch'</code>, <code>'toggle'</code></td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>'sort'</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>defaultButtonId</code></th>
                        <td data-label="Behavior">Sets the icon that is to be selected on page load; requires <code>type</code> to be <code>'sort'</code></td>
                        <td data-label="Accepted values">Any icon button id</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>''</code> (Defaults to the first icon button if empty)</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onChange</code></th>
                        <td data-label="Behavior">Calls a function when the icon group changes</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function() {}</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Methods</h4>
{{#aljs-pre-container type="js"}}
$('#icon-1').iconGroup('select');
$('#icon-2').iconGroup('deselect');
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the methods 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">Method</th>
                        <th scope="col">jQuery object</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>select</code></th>
                        <td data-label="jQuery object">The target icon button</td>
                        <td data-label="Outcome">The target icon button is selected</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>deselect</code></th>
                        <td data-label="jQuery object">The target icon button</td>
                        <td data-label="Outcome">The target icon button is deselected</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.button</code></th>
                        <td data-label="Element">The selected <code>.slds-button</code></td>
                        <td data-label="Trigger">A button is selected programmatically or on click</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>shown.aljs.button</code></th>
                        <td data-label="Element">The deselected <code>.slds-button</code></td>
                        <td data-label="Trigger">A button is deselected programmatically or on click</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}