I have a page where I am using the Spry tabbed widget to separate sections of a
form. Everything is working fine but recently I was asked if I could provide a
toggle so that they could see everything instead of using the tabs. I did not
see how this would be possible but figured I would ask, is there a way to
deinitialize a widget? Reason I asked is I noticed if I commented out the line
that initializes the tabbed widget that the page does display how they would
like it to with this requested toggling option.

Another option I was considering was adding another tab that when clicked
would grab the content out of each div and contenate it into this new tab
although not sure how feasible or well that would run when moving things around
like that.

Hello Aaron,

That is actually possible, the "only" thing the spry tabs are actually doing
for you is showing and hidding divs and swapping some classNames.

So what you could do is, create a function

that will loop through all Div's with Spry Content..
(easiest thing to use is the SpryDOMUtils.js)

Spry.$$(''.TabbedPanelsContent).setProperty('displ ay','block');

that will get all element with the class TabbedPanelsContent and gives it a
display:block; so they are visable again.


About you other options.
Its possible to it that way but it depends if you have interactive content in
it. Than It would be a bit harder to do..

Thanks, if I want to toggle it back what would I set the display back to or would I just re-initialize the widget?

If you set do a showPanel Spry will automaticly reset your display and show the correct tab

tabpanelvariablename.showPanel(1);

(i think thats the syntax)

Thanks, I will give it all a try this upcoming week.

Hmzz I tested with variablenameofmytabbedpanel.showPanel(1); and it worked just fine. No issues what so ever.

But wouldn't that show the panel? I am not trying to show the panel in that
case. I am trying to hide just the tabs, what is displayed via the LI
elements. The reason I am trying to hide it at that point is because I have
since changed the display for all of the content to block so that it all
displays on the page without selecting a tab.

If you put the following onto the tabbed_panel_unobtrusive.htm sample file
that comes with Spry then you will see what I have been trying:

<script type="text/javascript" language="javascript">
function TestMe() {
// Spry.$$("ul.TabbedPanelsTabGroup").setStyle("displ ay:'';");
Spry.$$("div.TabbedPanelsContent").setStyle("displ ay:block;");
}
</script>

<input type="button" value="Remove Tabs" onclick="TestMe()" /><input
type="button" value="Display Tabs" onclick="InitPage()" />

The Remove Tabs button you will notice does allow you to then see the content
from all 4 tabs but it leaves the tabs themselves. The Display Tabs then puts
the content back into each tab for lack of a better description. So when the
Remove Tabs is ran I was hoping to hide the tabs so that a user would not click
on one.

Aah that is where the confusion was on my side, i thought you just wanted to
show the content again.

And your can just do:
Spry.$$("ul.TabbedPanelsTabGroup").setStyle("displ ay:''none");
that will hide them.

Thanks, I do not know why I did not put "none" in there, I already had the line in there and commented out but a blank value for display from when I tried that approach.