Comment faire exploser les onglets jquery dans la page entière

Question

J'ai une page qui ressemble à ceci:

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

dans lequel un onglets ont jQuery éléments avec 4 onglets. Je voudrais avoir un bouton qui montrerait les 4 onglets en même temps sur toute la page avec une option de fermeture pour le récupérer comme avant. Quelque chose comme ceci:

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

Une idée sur comment faire cela?

Answer 1

J'ai fait quelque chose de similaire récemment. En supposant que vos onglets sont des éléments DIV, ont le code appel bouton faire quelque chose le long de ces lignes

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. 
    }); 
} 

Ensuite, créez une méthode collapse qui reprend les opérations effectuées par expand et ont votre gros bouton appeler. Si vous trouvez que collapse a besoin de savoir quelque chose sur l'état des choses avant que expand ait été appelé (comme quel onglet était actif), utilisez la méthode jQuery.data() pour stocker cette information pour la récupération ultérieure par collapse.

REMARQUE: Si vous préférez, au lieu de supprimer la classe 'tab' et d'ajouter la classe 'expandedtab', vous pouvez simplement appliquer/redéfinir des styles spécifiques en ajoutant expand un attribut de style à l'onglet DIV et collapse supprimer le attribut.