表示・非表示をスライドで交互に切り替える slideToggle()

2015年8月3日

slideToggle()は、toggle()を
スライドアニメーションにしたものです。
セレクターで指定した要素が指定されている場合は非表示に、
非表示のときは表示状態に切り替えます。

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

実行結果はこちらです。
水色の箇所をクリックすると、アコーディオンのように表示・非表示を切り替えます。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}

    dl{
        width:200px;
        margin:20px;
    }
    dl dt{
        background-color:aqua;
        cursor:pointer;
    }
    dl dd{
        border:1px solid yellow;
    }
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<dl>
    <dt>slideDown/SlideUp動作確認</dt>
    <dd>アニメーションで表示を切り替える</dd>
</dl>

<script>
$(function(){
    $("dt").click(function(){
       $("dd:not(:animated)").slideToggle("fast");
    });
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

dl{

width:200px;

margin:20px;

}

dl dt{

background-color:aqua;

cursor:pointer;

}

dl dd{

border:1px solid yellow;

}

</style>

</head>

<body>

<dl>

<dt>slideDown/SlideUp動作確認</dt>

<dd>アニメーションで表示を切り替える</dd>

</dl>

$(function(){

$("dt").click(function(){

$("dd:not(:animated)").slideToggle("fast");

});

</script>

</body>

</html>

前回のコードと比べるとすっきりしました。