+
+
+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>
+
+