Toggle Samples - InkJS

To use the Toggle, apply the ink-toggle class to the trigger element, and add a data-target attribute to it, to choose which element(s) get toggled. When you click outside, the toggled elements are hidden again.

Since it is integrated with the Ink classes, it just toggles on and off the hide-all and show-all classes.

Example code:

<button class="ink-button" id="alert-toggler" data-target="#alert-toggle-target">
    See more
</button>

<div id="alert-toggle-target" class="ink-alert block hide-all" role="alert">
    <h4>This is a details section</h4>
    <p>Which you don't care about.</p>
</div>

<script type="text/javascript">
    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        new Toggle('#alert-toggler');
    });
</script>
                    

Warning Don't do this. You should use Ink.UI.Dropdown instead.

<div class="ink-dropdown">
    <button class="ink-button ink-toggle" data-target="#dropdown">
        Dropdown <span class="fa fa-caret-down"></span>
    </button>
    <ul id="dropdown" class="dropdown-menu hide-all">
        <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="ink-toggle" data-target="#submenu1">A longer option name</a>
            <ul id="submenu1" class="dropdown-menu">
                <li class="submenu">
                    <a href="#" class="ink-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 type="text/javascript">
    Ink.requireModules(['Ink.Util.Array_1','Ink.UI.Toggle_1'], function(InkArray, Toggle) {
        // You don't need this if you use autoload.js
        InkArray.each(Ink.ss('.ink-toggle'),function(item){
            new Toggle(item);
        });
    });
</script>
                    

Toggling between two classes

You can toggle an element between two classes. Just set data-class-name-on and data-class-name-off:

Click here to toggle this label's color

<p>
    Click
    <button id="2cls" data-target=".ink-label.green" data-class-name-on="green" data-class-name-off="red">here</button>
    to toggle <span class="ink-label green">this label's color</span>
</p>

<script>
    Ink.requireModules(['Ink.UI.Toggle_1'], function (Toggle) {
        // You don't need this if you use autoload.js
        new Toggle('#2cls');
    });
</script>