{{!--<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>
        <p><strong>Suggested edits to SLDS markup:</strong></p>
        <ul class="slds-m-bottom--large">
            <li>Add the <code>slds-hide</code> class to <code>slds-dropdown</code> elements to prevent picklist dropdowns from appearing before the plugin initializes</li>
        </ul>
{{#aljs-pre-container type="html"}}
<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click" data-aljs="picklist">
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-01">Categories</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right slds-picklist__input">
            <input type="search" id="text-input-01" class="slds-lookup__search-input slds-input" placeholder="Select an Option" aria-owns="option-list-01" role="combobox" aria-activedescendant="" aria-expanded="false" readonly="" />
            <button class="slds-button slds-input__icon slds-text-color--default" aria-expanded="false" tabindex="-1" title="settings">
                <svg class="slds-button__icon slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">Expand category options</span>
            </button>
        </div>
    </div>
    <div class="slds-dropdown slds-dropdown--left" role="listbox">
        <ul id="option-list-01" class="slds-dropdown__list slds-dropdown--length-5" role="presentation">
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="0" id="listbox-option-242">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                    <span class="slds-truncate">Option A</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-243">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                    <span class="slds-truncate">Option B</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-244">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                    <span class="slds-truncate">Option C</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-245">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                    <span class="slds-truncate">Option D</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-246">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                    <span class="slds-truncate">Option E</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-247">
                    <svg class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small slds-shrink-none" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                    </svg>
                  <span class="slds-truncate" title="Option FGHIJKLMNOPQRSTUVWXYZ">Option FGHIJKLMNOPQRSTUVWXYZ</span>
                </span>
            </li>
        </ul>
    </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="picklist"</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-picklist</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="picklist"]').picklist();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="picklist"]').picklist({
        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>onChange</code></th>
                        <td data-label="Behavior">Calls a function when a picklist value changes</td>
                        <td data-label="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">Methods</h4>
{{#aljs-pre-container type="js"}}
var idToSelect = 'listbox-option-246';

$('[data-aljs="picklist"]').picklist('setValue', idToSelect, false);
$('[data-aljs="picklist"]').picklist('getValue');
{{/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">Parameters</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>setValue</code></th>
                        <td data-label="jQuery object">The picklist</td>
                        <td data-label="Parameters">A string of the id to select, and an optional param on whether or not to call the <code>onChange</code> method (defaults to <code>false</code>)</td>
                        <td data-label="Outcome">The picklist is set to select the item with the passed in id</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>getValue</code></th>
                        <td data-label="jQuery object">The picklist</td>
                        <td data-label="Parameters">N/A</td>
                        <td data-label="Outcome">An object that represents the selected item is returned</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>getValueId</code></th>
                        <td data-label="jQuery object">The picklist</td>
                        <td data-label="Parameters">N/A</td>
                        <td data-label="Outcome">The id of the selected object</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>bindChoices</code></th>
                        <td data-label="jQuery object">The picklist</td>
                        <td data-label="Parameters">N/A</td>
                        <td data-label="Outcome">The picklist choices are unbound and rebound (for dynamically added choices)</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>change.aljs.picklist</code></th>
                        <td data-label="Element">The picklist input changing its value</td>
                        <td data-label="Trigger">A picklist option is selected</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}