@ PHP

Accordion panel:アコーデオンパネル

スムースに開閉するアコーデオンパネルのソースコードです。

accordion_panel.html

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

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
dl {
  width: 100%;
  max-width: 960px;
  margin: 50px auto;
}
dt {
  font-size: large;
  font-weight: bold;
  line-height: 35px;
  height: 35px;
  text-indent: 3em;
  color: #333;
  border-bottom: solid 1px #fff;
  background: #eee;
}
dd {
  margin: 0;
  background: #f9f9f9;
}
dd p {
  margin: 0;
  padding: 20px;
  text-indent: 1em;
}
</style>
</head>

<body>
<div class="container">
  <dl>
    <dt>Step.1</dt>
    <dd>
      <p>some explanation heae ‥‥</p>
    </dd>
    <dt>Step.2</dt>
    <dd>
      <p>some explanation heae ‥‥</p>
    </dd>
    <dt>Step.3</dt>
    <dd>
      <p>some explanation heae ‥‥</p>
    </dd>
  </dl>
<!-- /.container --></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("dd:not(:first)").css("display", "none");
  $("dl dt").click(function() {
    if ($("+dd", this).css("display") == "none") {
      $("dd").slideUp("slow");
      $("+dd", this).slideDown("slow");
    }
  });
});
</script>
</body>

</html>

demo

スクリプトの解説

一番目以外のdd要素を非表示にします。

$("dd:not(:first)").css("display","none");

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

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

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

if($("+dd",this).css("display")=="none"){

次のように記述することもできます。

if($($(this).next()).css("display")=="none"){

全てのdd要素に対してslideUp()を適用します。slideUp()は、表示中の要素をスライドさせて非表示にする命令です。

$("dd").slideUp("slow");

次にパネルを展開する処理です。クリックされたラベル(dt要素)に対応するパネル(dd要素)を隣接セレクターで特定し、slideDown()を使ってスライドアニメーションで展開します。

$("+dd",this).slideDown("slow");

次のように記述することもできます。

$($(this).next()).slideDown("slow");