Dojo - Show & hide

Dojo - Show & hide

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">

	<script>dojoConfig = {parseOnLoad: false}</script>
	 
    <span data-dojo-type="HidePane" data-dojo-props="open:false" data-dojo-id="pane">This pane is initially hidden</span>
<button onclick="pane.set('open', true);">show</button>
<button onclick="pane.set('open', false);">hide</button>

JavaScript

require([
     "dojo/_base/declare", "dojo/dom-style", "dojo/parser", "dojo/ready",
     "dijit/_WidgetBase", "dijit/_TemplatedMixin"
 ], function(declare, domStyle, parser, ready, _WidgetBase, _TemplatedMixin){

     declare("HidePane", [_WidgetBase], {
         // parameters
         open: true,
         _setOpenAttr: function(/*Boolean*/ open){
             this._set("open", open);
             domStyle.set(this.domNode, "display", open ? "block" : "none");
         }
     });

     ready(function(){
         // Call the parser manually so it runs after our widget is defined, and page has finished loading
         parser.parse();
     });
 });