@ PHP

slideDown() slideUp()

slideDown() slideUp() は、セレクタで指定した要素の表示・非表示をスライドアニメーションで切り替えるメソッドです。slideDown() は非表示の要素の高さを 0 から本来の高さに徐々に近づけながら表示します。slideUp() は表示状態の要素の高さを徐々に 0 に近づけながら非表示にします。

event_slide.html は、slideDown() slideUp() を使って作成した「開閉パネル」(Collapsible-Panel)と呼ばれる UI です。

event_slide.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
dl {
  width:300px;
  margin:50px auto;
}
dl dt {
  cursor:pointer;
  background:#7CADB6;
}
dl dd {
  height: 200px;
  margin: 0;
  border: 1px solid #7cadb6;
}
</style>
</head>

<body>
  <dl>
    <dt>スライドして状態を切り替える</dt>
    <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
  </dl>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("dt").click(function() {
    if($("dd").css("display")=="block"){
      $("dd:not(:animated)").slideUp("slow")
    }else{
      $("dd").slideDown("slow")
    }
  })
});
</script>
</body>

</html>

demo

スクリプトの流れ

click() を使って、ラベル(dt要素)がクリックされたときのイベントの処理を設定します。

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

click イベントでは、if() によって処理が実行される条件を設定します。条件は、dd 要素の display プロパティーが block の場合です。

if($("dd").css("display")=="block"){
  ・・・
}

セレクタに :not(:animated) を追加して、アニメーション中ではない場合にのみ slideUp() を実行します。

$("dd:not(:animated)").slideUp("slow")

dd 要素の display プロパティーが block ではないときは slideDown() を実行します。

}else{
  $("dd").slideDown("slow")
}