Slide div from behind other div via jquery

Question

We have a div of content (#content) and on the right hand side of the div a tab (#tab) -- when a user clicks #tab it should slide to the right and reveal various options.

I'm not sure how to create this via jQuery. I thought (draft CSS that I made up in my head):

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

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

and javascript that slides #tab to the right by 140px [the tab graphic is 10px]

So typically the #tab would mostly (except the 10px graphic icon) be behind #content, and the jquery simply alters the position to shift it to the right.

Is that possible? Is there a better approach?

Answer 1

I am not too sure if it is possible as you have set the z-index of #tab to be lower than that of #content. So effectively #content covers #tab.

However, for shifting to the right using jQuery...

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

Answer 2

Animate will work even with elements that have a z-index. However maybe you should look at

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

This does what you want with a little customisation.

or the vertical accordian: http://tinyjs.com/files/projects/jquery-vertical-accordion/index.html