dt-ddのアコーディオンメニューでセパレートの線を引く
仕様
dt-ddのアコーディオンメニューでセパレートの線を引く
動作
- dtを押すとddが開き再度押すと消える。
- またddが開いている状態で別のdtを押すとすでに開いているddは消える
パターン
パターンは3つ。
- menu1
ddには常に下線がついていて開くと下線がみえ、閉じると消える
- menu2
dtを押すとddに下線がつき、別のdtを押すと自分のddに下線がひかれ、元のddの下線が消えてからスライドする
- menu3
dtを押すとddに下線がつき、別のdtを押すと、まずスライドしてから自分のddに下線がひかれ、元のddの下線が消えてからスライドする
ソース
html
test_11.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_11.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/j<script type="text/javascript" src="test_11.js"></script>
<title>test11 dt-ddのアコーディオンメニューでセパレートの線を引く</title>
</head>
<body>
<h1>test11 dt-ddのアコーディオンメニューでセパレートの線を引く</h1>
<h2>menu1</h2>
<dl id="menu1" class="accordion">
<dt>アコーディオン１</dt>
<dd>
<p>アコーディオン１の内容１</p>
<p>アコーディオン１の内容２</p>
</dd>
<dt>アコーディオン２</dt>
<dd>
<p>アコーディオン２の内容１</p>
<p>アコーディオン２の内容２</p>
</dd>
<dt>アコーディオン３</dt>
<dd>
<p>アコーディオン３の内容１</p>
<p>アコーディオン３の内容２</p>
</dd>
</dl>
<h2>menu2</h2>
<dl id="menu2" class="accordion">
<dt>アコーディオン４</dt>
<dd>
<p>アコーディオン４の内容１</p>
<p>アコーディオン４の内容２</p>
</dd>
<dt>アコーディオン５</dt>
<dd>
<p>アコーディオン５の内容１</p>
<p>アコーディオン５の内容２</p>
</dd>
<dt>アコーディオン６</dt>
<dd>
<p>アコーディオン６の内容１</p>
<p>アコーディオン６の内容２</p>
</dd>
</dl>
<h2>menu3</h2>
<dl id="menu3" class="accordion">
<dt>アコーディオン７</dt>
<dd>
<p>アコーディオン７の内容１</p>
<p>アコーディオン７の内容２</p>
</dd>
<dt>アコーディオン８</dt>
<dd>
<p>アコーディオン８の内容１</p>
<p>アコーディオン８の内容２</p>
</dd>
<dt>アコーディオン９</dt>
<dd>
<p>アコーディオン９の内容１</p>
<p>アコーディオン９の内容２</p>
</dd>
</dl>
</body>
</html>
css
test_11.css
.accordion dd.bor{
border-bottom: solid 1px;
}
javascript
test_11.js
$(function(){
$('.accordion dd').hide();
$('#menu1.accordion dd').addClass('bor').prev('dt').on('click',function(){;
$(this).next('dd').slideToggle().siblings('dd').slideUp();
});
$('#menu2.accordion dt').on('click',function(){
$(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp();
});
$('#menu3.accordion dt').on('click',function(){
var dd=$(this).next('dd');
$.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){
dd.addClass('bor').siblings('dd').removeClass('bor');
});
});
});