#

# Example: Showing and Hiding

This example shows how to show and hide `Node` instances.

Show or hide me with the buttons above.

## Showing a Node

By default, Node instances are hidden using the node's `hidden` attribute and the CSS `display`. Calling the `show` method displays the node.

    Y.one('#demo').show();

## Hiding a Node

The opposite of `show`, the `hide` method sets the node's `hidden` attribute to `true` and the CSS `display` to `none`.

    Y.one('#demo').hide();

## Toggling visibility

You can toggle the visibility between show and hide using `toggleView`.

    Y.one('#demo').toggleView();

## Checking visibility

You can detect whether a node is visible or not by checking for the hidden attribute:

    var isHidden = Y.one('#demo').getAttribute('hidden') === 'true';

## Complete Example Source

    <link rel="stylesheet" href='../../build/cssbutton/cssbutton.css'></link>

    <style>
    .example #demo {
        background-color: #D4D8EB;
        text-align: center;
        border: 1px solid #9EA8C6;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
        width: 23em;
        margin-top: 0.3em;
    }

    </style>

    <button id="hide" class="yui3-button">Hide</button>
    <button id="show" class="yui3-button">Show</button>
    <button id="toggle" class="yui3-button">Toggle</button>

    <div id="demo"><p>Show or hide me with the buttons above.</p></div>

    <script type="text/javascript">
    YUI().use('node', function(Y) {
        Y.delegate('click', function(e) {
            var buttonID = e.currentTarget.get('id'),
                node = Y.one('#demo');

            if (buttonID === 'show') {
                node.show();
            } else if (buttonID === 'hide') {
                node.hide();
            } else if (buttonID === 'toggle') {
                node.toggleView();
            }

        }, document, 'button');
    });
    </script>