[JavaScript] jQueryによる折りたたみ可能なパネルの作成 - jQueryによるアコーディオンパネルの作成

このページのタグ:[JavaScript] [jQuery] [アコーディオンパネル]
jQueryで折りたたみ可能なパネルを作成します。

概要

こちらの記事ではJavaScriptを用いて折り畳み可能なパネルのコードを紹介しました。また、こちらの記事ではCSSを用いて折り畳み可能なパネルを紹介しました。この記事ではjQueryを用いることでさらにシンプルなコードで折り畳み可能なパネルを作成します。

コード

以下のコードを記述します。
jQueryAccordionPanel.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="jQueryAccordionPanel.css" />

  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".Contents").css("display", "none");

      $(".Header").click(function () {
        if ($("+.Contents", this).css("display") == "none") {
          $(".Contents").slideUp(250);
          $("+.Contents", this).slideDown(250);
        }
      })
    })
  </script>
</head>
<body>
  <div class="Header">ヘッダ 1</div>
  <div class="Contents">コンテンツ 1</div>
  <div class="Header">ヘッダ 2</div>
  <div class="Contents">コンテンツ 2</div>
  <div class="Header">ヘッダ 3</div>
  <div class="Contents">コンテンツ 3</div>

</body>
</html>
jQueryAccordionPanel.css

.Header{
  border: 1px solid #0094ff;
  background-color:#0094ff;
  color:#ffffff;
  width:240px;
}

.Contents{
  border: 1px solid #0094ff;
  width:240px;
  height:64px;
}

解説


  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".Contents").css("display", "none");

      $(".Header").click(function () {
        if ($("+.Contents", this).css("display") == "none") {
          $(".Contents").slideUp(250);
          $("+.Contents", this).slideDown(250);
        }
      })
    })
  </script>


$(document).ready(function () {
  ...
}
上記のコードにより、ページ表示後にJavaScirptが実行されます。

$(".Contents").css("display", "none");
により、ページ表示直後Contentsクラスの枠はCSSの設定変更により非表示になります。


$(".Header").click(function () {
  if ($("+.Contents", this).css("display") == "none") {
    $(".Contents").slideUp(250);
    $("+.Contents", this).slideDown(250);
  }
})
上記コードはHeaderクラスのクリックイベントのコードです。Headerがクリックされると直後のContentsクラスの枠のCSSのdisplayプロパティをチェックします。枠が非表示である場合は、すべてのContentsクラスの枠をslideUpメソッドを呼び出し非表示にし、その後クリックされたHeader枠の直後のContents枠を、slideUpメソッドを呼び出しアニメーション効果を付けて枠を表示します。
登録日 :2014-01-08    最終更新日 :2015-11-12
このページのタグ:[JavaScript] [jQuery] [アコーディオンパネル]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)