SlideToggle 첫 번째와 마지막 div 사이에 토글합니다

Question

일부 탭을 만들 때 jquery를 사용하고 있습니다. 여기 내 기본 코드입니다. 사용자가 항목을 닫으려면 항목을 클릭 할 때 내가 slideToggle에 원하는

JSFiddle

나는 그것을 설정할 그래서 탭 콘텐츠의 초기 개방은 slideToggle하지만 다음 탭 사이를 이동하는 표준 전환은있다 다시. 그래서 예를 들면.

열기 탭 1 - slideToggle

이 가능하고 내가 얻을 수있는 방법 그렇다면 - 토글, 탭 닫기 2 - 탭 2로 이동, 전환 - 탭 3로 이동 토글 - SlideToggle, 탭 2로 이동 이. 나는 이것에 google을 시도했다 그러나 나는 응답을 찾아내는 것을 보일 수 없다.

미리 도움을 청하십시오.

HTML

<div class="tab">Tab 1</div> 
<div class="tab">Tab 2</div> 
<div class="tab">Tab 3</div> 

<div class="lrgWork"> Tab Content 1</div> 
<div class="lrgWork"> Tab Content 2</div> 
<div class="lrgWork"> Tab Content 3</div> 

JS

$('.tab').click(function() { 
     var index = $(this).index(); 
     $('.lrgWork').eq(index).slideToggle().siblings('.lrgWork').hide(); 
    }); 

Answer 1

에 대한

var currentTabOpen=0;//keeps track of what tab is open 
var tabOpen=false;//keeps track of whether a tab is opened 
$('.tab').click(function() { 
    var index=$(this).index(); 
    if(currentTabOpen==index||!tabOpen){//if we're either closing a tab, or opening one, 
     $('.lrgWork').eq(index).slideToggle();//use the slide animation 
     tabOpen=!tabOpen;//and now the tab is open if it was closed and vice versa 
    } 
    currentTabOpen=index;//make sure we're keeping track of the opened tab 
    $('.lrgWork').eq(index).show().siblings('.lrgWork').hide();//don't use the animation 
}); 

여기 참조 JSFiddle 작업 방법.