Toggle Samples - InkJS

Toggle #1 - Default Markup

<div class="ink-dropdown">
    <button class="ink-button toggle" data-target="#dropdown">Dropdown <span class="icon-caret-down"></span></button>
    <ul id="dropdown" class="dropdown-menu">
        <li class="heading">Heading</li>
        <li class="separator-above"><a href="#">Option</a></li>
        <li><a href="#">Option</a></li>
        <li class="separator-above disabled"><a href="#">Disabled option</a></li>
        <li class="submenu">
            <a href="#" class="toggle" data-target="#submenu1">A longer option name</a>
            <ul id="submenu1" class="dropdown-menu">
                <li class="submenu">
                    <a href="#" class="toggle" data-target="#ultrasubmenu">Sub option</a>
                    <ul id="ultrasubmenu" class="dropdown-menu">
                        <li><a href="#">Sub option</a></li>
                        <li><a href="#" data-target="ultrasubmenu">Sub option</a></li>
                        <li><a href="#">Sub option</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub option</a></li>
                <li><a href="#">Sub option</a></li>
            </ul>
        </li>
        <li><a href="#">Option</a></li>
    </ul>
</div>
<script>
    Ink.requireModules(['Ink.Util.Array_1','Ink.UI.Toggle_1'], function(InkArray, Toggle) {
        InkArray.each(Ink.ss('.toggle'),function(item){
            new Toggle(item);
        });
    });
</script>