Show onclick

[BrandonPrice]

Hello:

I am trying to refine my coworkers app. I have a content pane that I want to hide at runtime and only have visible when a button is clicked. I have been able to do the reverse of setting the visibility to hidden onclick. I haven't been able to do show onclick. I have my css displayed to none and the javascript visibility set to visible. Does anybody have any ideas as to why off the top?

HTML:

<div id="rightPane3" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right', closable:true" style="width:320px;display:none">

JS:

var Run = dijit.byId("Run");
Run.on("click", function() {
domStyle.set("rightPane3", "visibility", "visible");
});

The panel on the right is want I want to hide at runtime and only show when the run button is clicked.

https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=881a1ee0-64a1-46...

[RobertScheitlin__GISP · Accepted solution]

Brandon,

   Here is code I use to toggle a sidebar in one of my JS API apps:

            function toggleSidebar() {
                var bc = dijit.byId("borderContainer");
                var rc = dijit.byId("rightContainer");
                var panelIndex = bc.getIndexOfChild(rc);
                if(panelIndex >= 0) {
                    bc.removeChild(rc);
                } else {
                    bc.addChild(rc);
                }
            }‍‍‍‍‍‍‍‍‍‍

I call toggleSidebar at the start of my app.