<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>アコーディオン</title>
<style>
* {
margin:0;
padding:0;
}
dl {
width:400px;
margin:50px auto;
}
dt {
background:#7CADB6;
border-bottom:1px solid #FFF;
cursor:pointer;
padding: 8px 6px 6px 8px;
color:#FFF;
font-weight:bold;
}
dd {
border:1px solid #7CADB6;
border-top:none;
height:300px;
padding: 12px;
}
</style>
</head>
<body>
<dl>
<dt>テキスト1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('dd:not(:first)').css('display','none')
$('dt').click(function(){
if($('+dd',this).css('display')=='none'){
$('dd').slideUp('slow');
$('+dd',this).slideDown('slow');
}
});
});
</script>
</body>
</html>
(1)jQueryの命令を記述する場所を記述
$(function(){
(中略)
});
(2)セレクターに1番目以外のパネル(dd要素)を指定
- 1番目以外のdd要素に対して、css()でdisplayプロパティをnoneに変更
- この処理によって最初のパネル以外は非表示になり、アコーディオンパネルの初期状態になります
$(function(){
$("dd:not(:first)").css("display","none");
});
(3)ラベル(dt要素)に対してイベントを設定
- dt要素がクリック(click)されるとclick(function(){…})内の処理を実行する
$(function(){
$("dd:not(:first)").css("display","none");
$("dt").click(function(){
(中略)
});
});
(4)JavaScriptのif文を使って、処理を実行する条件を指定
- セレクターで指定した要素のdisplayプロパティがnoneなら、{…}内に書かれた命令を実行する
- セレクターの後ろにある,(カンマ)は、セレクターの影響範囲を指定
- すぐ後ろになるthisは、イベントが発生した要素、このサンプルではクリックされたdt要素を表す
- $("+dd",this) は、クリックされたdt要素の次に登場するdd要素を指します
- 現在閉じているパネルに対応するラベルがクリックされた場合のみ、{…}内の命令が実行されます
$(function(){
$("dd:not(:first)").css("display","none");
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){
(中略)
}
});
});
(5)すべてのdd要素に対してslideUp()を適用
- slideUp()は、表示されている要素をスライドさせながら非表示にする命令です
$(function(){
$("dd:not(:first)").css("display","none");
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
}
});
});
(6)クリックされたラベルに対応するパネル部分をアニメーション付きでスライド
- セレクター$("+dd",this)は、クリックされた要素(dt要素)の次に登場するdd要素という意味
- スライドアニメーション付きで要素を表示する命令はslideDown()です
$(function(){
$("dd:not(:first)").css("display","none");
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$('+dd',this).slideDown('slow');
}
});
});
アコーディオン - Query基本形
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>アコーディオン</title>
<style>
#faq {
width: 500px;
}
.question {
padding:5px;
font-weight:bold;
font-family:Arial;
font-size:16px;
border:1px solid #ddd;
background:#eee;
cursor: pointer;
}
.answer {
padding:25px;
font-family:Arial;
font-size:13px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<divid="faq">
<divclass="question">Question 01</div>
<divclass="answer">Answer 01<br>Answer 01<br>Answer 01<br>Answer 01<br></div>
<divclass="question">Question 02</div>
<divclass="answer">Answer 02<br>Answer 02<br>Answer 02<br>Answer 02<br></div>
<divclass="question">Question 03</div>
<divclass="answer">Answer 03<br>Answer 03<br>Answer 03<br>Answer 03<br></div>
</div>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('#faq .answer').not(':first').hide();
$('#faq .question').click(function(){
if($(this).next('.answer').is(':visible')){
$(this).next('.answer').slideUp(300);
}else{
$(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300);
}
});
</script>
</body>
</html>
アコーディオン(アニメーションなし)
<dlclass="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>
<dlclass="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>
$(function(){
$('.accordion').each(function(){
var dl = $(this);
var allDt = dl.find('dt');
var allDd = dl.find('dd');
allDd.hide();
allDt.css('cursor','pointer');
allDt.click(function(){
var dt = $(this);
var dd = dt.next();
allDd.hide();
dd.show();
allDt.css('cursor','pointer');
dt.css('cursor','default');
});
});
});
* {
margin:0;
padding:0;
line-height:1.4;
}
body{
padding:40px;
font-family:Arial, Helvetica, sans-serif;
}
dl{
width:320px;
margin:0 0 20px;
}
dt{
padding:6px 10px 6px;
background:#444;
color:#fff;
margin:0 0 3px;
font-weight:bold;
border-radius:8px 0 0 0;
border-left:2px solid #444;
border-top:2px solid #444;
}
dd{
padding:8px 10px 12px;
width:298px;
border-left:2px solid #444;
background:#eee;
margin:-3px 0 3px;
}
CSSでアコーディオンパネル
HTMLの記述
- 「unordered list」または「definition list」を設定する
- 「unordered list」の中に「definition list」をネストすることも可能(例では、見出しと本文のセット)
- マウスオーバーではなく、クリックの場合はjQueryを利用します
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<linkhref="css/style.css"rel="stylesheet">
</head>
<body>
<ulclass="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>
@charset "UTF-8";
* {
margin:0;
padding:0;
}
.accordion {
width: 400px;
height: 300px;
margin-left:10px;
}
.accordion li {
color: #555;
background: #fff;
margin-bottom:5px;
height:20%;
overflow: hidden;
-webkit-transition:all 0.4s ease-in;
transition: 0.4s all ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;
}
.accordion li:hover {
height:70%;
}
.accordion li h2 {
color: #333;
margin-bottom: 10px;
padding: 5px;
background: #eee;
border: 1px solid #ccc;
}
.accordion li:hover h2 {
color: #fff;
background:#81AF86;
border: 1px solid #ccc;
}
.accordion li div {
padding-top:12px;
}