Show or hide a DOM-node

This example shows how you can show and hide a node. To hide a node on startup, you must add the 'itsa-hidden' as well as hide the element initially through node.hide(). The latter is needed to be able to call node.show(true) on the initial hidden Node. Without initially hided by JS, there won't be a fade-effect for the first time the node gets visible.

Clik on the button to toggle the className:

Code-example:

<body>
    <div id="btncontainer">
        <button id="button-show" class="pure-button pure-button-primary pure-button-bordered">Show Node</button>
        <button id="button-show-faded" class="pure-button pure-button-primary pure-button-bordered">Show Node faded</button>
        <button id="button-hide" class="pure-button pure-button-primary pure-button-bordered">Hide Node</button>
        <button id="button-hide-faded" class="pure-button pure-button-primary pure-button-bordered">Hide Node faded</button>
    </div>

    <div class="container itsa-hidden itsa-transparent"></div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var container = document.getElement('.container');

    var action = function(e) {
        switch (e.target.getId()) {
            case 'button-show': container.show();
                break;
            case 'button-show-faded': container.show(5);
                break;
            case 'button-hide': container.hide();
                break;
            case 'button-hide-faded': container.hide(5);
        }
    };

    ITSA.Event.after('tap', action, 'button');

</script>

API Docs

Examples

Module-documentation

Show or hide a DOM-node