<link rel="stylesheet" href='{{yuiBuildUrl}}/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>
