toggle display of elements

[mlyons]

Hi,

I am trying to toggle the display of a panel and all it's associated elements on the click of a button.

I can use removeElements("myPanel"); to remove it which works fine. Is there a method to save it before removing and add it back or do I have to recreate all the elements and set their properties again ie.

var newButton = newElement(3, 20, "button", "Click Me", "btnNew") ;
applyProperty("btnNew", "onclick", "alert('clicked')");
...
...

I am doing this in Genie and changing the program is not an option.

Thanks,
Michelle

[Colin McNeill]

Michelle,

Instead of removing it, have you tried changing the visibility? You will still utilize the applyProperty() API but change the visibility property based on the click of the button. That way you don't have to worry about the associated elements being saved.

Within the onclick event of the button do something like this (pseudo code):

Code: Select all

if 'myPanel' is currently visible {
applyProperty("myPanel", "visibility", "hidden");
}

else {
applyProperty("myPanel", "visibility", "visible");
 }
 

Let us know if this is helpful, or if you have more questions!

Thanks!

[mlyons]

Thanks Colin, however that did not work because the panel is hidden initially, therefor the element doesn't exist in order to hide it. My thought was to save it on load and then remove it, then recreate it on a button click. I understand that this would have to be done in the custom.js in order to still have access to the copied object. I was hoping since there is a method to remove it, that there would be a method to add that I could copy the stored properties to (kind of like eval-corr :) ).
Thanks,
Michelle

[mlyons]

I got it to work using -

applyProperty("Panel2", "visibility", "visible");

//must do this or it doesn’t work if the element is hidden when the page loads
applyProperty("Panel2", "field type", "css panel");

Thanks,
Michelle