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メソッドを呼び出しアニメーション効果を付けて枠を表示します。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2014-01-08
