version 1.0.0
module: vdom
maintanance: Marco Asbreuk
all modules

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 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:


    <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 class="container itsa-hidden itsa-transparent"></div>
<script src="itsabuild-min.js"></script>
    var container = document.getElement('.container');

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

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

API Docs