Faites glisser div de derrière les autres div via jquery

Question

Nous avons une div de contenu (#content) et sur le côté droit de la div un onglet (#tab) - quand un utilisateur clique sur #tab, il devrait glisser vers la droite et révéler diverses options.

Je ne sais pas comment créer ceci via jQuery. Je pensais que (projet CSS que j'ai fait dans ma tête):

#content { 
z-index:10; 
margin:0 auto 
} 

#tab { 
z-index: 5; 
float: left; 
width: 150px 
} 

et javascript qui glisse #tab à droite par 140px [le graphique de l'onglet est 10px]

donc généralement la plupart du temps #tab serait (sauf l'icône graphique 10px) derrière #content, et la jquery modifie simplement la position pour la déplacer vers la droite.

Est-ce possible? Est-ce qu'il y a une meilleure approche?

Answer 1

Je ne sais pas trop si c'est possible car vous avez défini l'index z de #tab plus bas que celui de #content. DonC#content couvre efficacement #tab.

Cependant, pour le déplacement vers la droite en utilisant jQuery ...

$("#tab").click(function(){ 
     $(this).animate({"left": "+=50px"}, "slow"); 
    }); 

Answer 2

Animer fonctionnera même avec des éléments qui ont un z-index. Cependant peut-être vous devriez regarder

http://docs.jquery.com/UI/Accordion

Cela fait ce que vous voulez avec un peu de personnalisation. Ou l'accordéon vertical: http://tinyjs.com/files/projects/jquery-vertical-accordion/index.html