jQuery: slideToggle()メソッド

slideToggle()メソッドは、スライドダウンとスライドアップの機能をあわせ持ったメソッドです。

指定した要素が非表示の場合slideDown()メソッドを実行し、 指定した要素が表示されている場合はslideUp()メソッドを実行します。 どちらもスライドアニメーションのような効果を得られます。

特に、スライドメニューのような開閉式コンテンツを作る際に便利なメソッドです。

slideToggle() 書式


$(セレクタ).slideToggle(スピード,コールバック関数);

スピードは'slow'、'normal'、'fast'、またはミリ秒単位で指定します。1000と指定すると1秒になります。 省略した場合は'normal'です。具体的な速さは'slow'が0.6秒、'normal'が0.4秒、'fast'が0.2秒です。

コールバック関数はスライドアニメーション完了後に実行する関数です。

slideToggle() コード例


// normal
$('dd').slideToggle();

// 1秒
$('dd').slideToggle(1000);

// コールバック関数あり
$('dd').slideToggle(1000, function(){
    // 処理を記述
});

動作

実際の動作を見てみます。背景色が青色の部分をクリックすると、コンテンツ部分が徐々に開閉します。 コードも下に掲載しています。

スピード=1000
コンテンツ部分です。
コンテンツ部分です。
コンテンツ部分です。
スピード='normal'
コンテンツ部分です。
コンテンツ部分です。
コンテンツ部分です。

HTML


<dl>
    <dt id="dt1">スピード=1000</dt>
    <dd>コンテンツ部分です。<br>コンテンツ部分です。<br>コンテンツ部分です。</dd>
    <dt id="dt2">スピード='normal'</dt>
    <dd>コンテンツ部分です。<br>コンテンツ部分です。<br>コンテンツ部分です。</dd>
</dl>

CSS


dl {
    width: 300px;
}
dt {
    background: navy;
    color: white;
    font-weight: bold;
    border: 1px solid white;
    cursor: pointer;
}
dd {
    border: 1px solid silver;
}

JavaScript


$('#dt1').on('click', function(){
    $('#dt1+dd').slideToggle(1000);
});
$('#dt2').on('click', function(){
    $('#dt2+dd').slideToggle('normal');
});

jQuery入門