AnsweredAssumed Answered

Hide Content Pane (leftpane)

Question asked by deleted-user-yA_w_FC9FKe5 on Apr 16, 2014
Latest reply on Apr 22, 2014 by davidfkimball
I would like to have the ability to hide/show my content boxes that contain my legend and bookmarks.  Currently I am trying to use a toggle button to do this but what I would really like to do is use a slider.  I've tried lots of things but with very little progress.  When I use the toggle button it hides things or moves them but the white box still stays on the screen.  The goal is to see more of the map. 




I've tried some stuff like this:

  require(["dojo/ready", "dijit/form/ToggleButton"], function(ready, ToggleButton){
    ready(function(){
     new ToggleButton({
      showLabel: true,
      checked: false,
       onChange: function(val){           
       if(val == true){
         //document.getElementById("leftPane").style.display = 'block';
        document.getElementById("leftPane").style.marginLeft="-190px";
        document.getElementById("leftPane").style.width = '200px';
        this.set('label', 'Hide Legend');
       }
       else{       
        //document.getElementById("leftPane").style.display = 'none';
        document.getElementById("leftPane").style.marginLeft="0px";
        document.getElementById("leftPane").style.width = '200px';
        this.set('label', 'Show Legend');
       }   
       },  
      //onChange: function(val){this.set('label',val)},
      label: "Hide Legend"
     }, "btnContentPaneSwitch");
    });
        });




Code for content panes I am trying to hide
           <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
                <div dojotype="dijit.layout.AccordionContainer">
   
                     <div dojotype="dijit.layout.ContentPane" title="Bookmarks: Stores">
                        <div id="StoreBookmarksWidget"> </div>
                    </div>

                      <div dojotype="dijit.layout.ContentPane" title="Bookmarks: Districts" >
                        <div id="DistrictBookmarksWidget"> </div>
                    </div>

                   
                    <div dojotype="dijit.layout.ContentPane" title="Legend" selected="true">
                        <div id="sliderDiv"> </div>
                    </div>
                   
               </div>
             </div>

Outcomes