How to explode jquery tabs into the whole page

Question

I have a page that looks something like this:

+-------------------------------------------+
|                                           |
| +----------------------------+ +--------+ |
| |main                        | |sidebar | |
| |                            | |+------+| |
| |                            | ||jquery|| |
| |                            | || tabs || |
| |                            | |+------+| |
| |                            | |        | |
| |                            | |        | |
| +----------------------------+ +--------+ |
+-------------------------------------------+

in which a have jQuery tabs elements with 4 tabs. I would like to have one button that would show all 4 tabs at the same time on the whole page with a close option to get it back as it was before. Something like this:

+-------------------------------------------+
|                                           |
| +------------------+ +------------------+ |
| | tab 1            | | tab 2            | |
| |                  | |                  | |
| +------------------+ +------------------+ |
|                                           |
| +------------------+ +------------------+ |
| | tab 3            | | tab 4            | |
| |                  | |                  | |
| +------------------+ +------------------+ |
|                                     close |
+-------------------------------------------+

Any idea on how to go about doing this?

Answer 1

I did something similar recently. Assuming that your tabs are DIV elements, have the button call code doing something along these lines

function expand(){
  $('div.tab').each(function(){ 
    $(this).show(); //Make sure all our tabs are visible
    $(this).removeClass('tab'); //Remove any sizing etc. previously applied to the tab by your stylesheet
    $(this).addClass('expandedtab'); //Apply class which sets proper size, floats left etc.
  }); 
}

Then create a collapse method which reverts the operations performed by expand and have your Close-button call it. If you find that collapse needs to know something about the state of affairs before expand was called (like which tab was active), have expand use the jQuery.data() method to store this information for later retrieval by collapse.

NOTE: If you prefer, instead of removing the 'tab' class and adding the 'expandedtab' class, you can just apply/override specific styles making expand add a style-attribute to the tab DIV and have collapse remove the attribute.