Example: Showing and Hiding

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='http://yui.yahooapis.com/3.17.2/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>