Слайд div из-за другого div с помощью jquery

Question

У нас есть div содержимого (#content) и справа от вкладки div a (#tab) - когда пользователь нажимает #tab, он должен скользить вправо и открывать различные варианты.

Я не уверен, как создать это через jQuery. Я подумал (черновик CSS, который я придумал в своей голове):

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

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

и javascript, который сдвигает #tab вправо на 140 пикселей [вкладка имеет размер 10 пикселей]

Таким образом, обычно #tab в основном (кроме графического значка 10px) будет позади #content, а jquery просто меняет позицию, чтобы сместить его вправо.

Это возможно? Есть ли лучший подход?

Answer 1

Я не слишком уверен, возможно ли это, поскольку вы установили z-индекс #tab ниже, чем #content. Так что #content охватывает # tab.

Однако для перехода вправо с помощью jQuery ...

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

Answer 2

Animate будет работать даже с элементами, имеющими z-индекс. Однако, возможно, вам стоит взглянуть на

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

Это делает то, что вы хотите с небольшой настройкой.

или вертикальный аккордеон: http://tinyjs.com/files/projects/jquery-vertical-accordion/index.html