SlideToggle最初と最後のdivの間で切り替える

Question

私はいくつかのタブを作成するためにjqueryを使用しています。ここに私の基本的なコードです。

JSFiddle

私はタブのコンテンツの初期開口部がslideToggleあるので、それを設定したいが、ユーザが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を参照してください。