#

# Example: Showing and Hiding with Transitions

This example shows how to show and hide Node instances.

lorem ipsum dolor sit

## Showing a Node

The view of a Node instance can be transitioned by passing `true` to the `show` and `hide` methods.

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

## Hiding a Node

The opposite of `show`, the `hide` method sets the node's CSS `display` property to `none`.

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

## Complete Example Source

    <button id="hide" class="yui3-button">hide</button>
    <button id="show" class="yui3-button">show</button>

    <div class="demo"><p>lorem ipsum dolor sit</p></div>

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

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

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