Example: Showing and Hiding with Transitions

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>