JQuery UIを使うと、非常に簡単に定番のアコーディオンを実装できます。ただし、背景色の変更などは自動で割り振られるui-accordion-header(content)クラスの背景を一度リセットして、それから再設定してあげる必要があります。
細かいオプションがいくつかありますが、今回は次の条件をクリアできるように設定しました。
①閉じた状態から開始される
②全て閉じられる
③コンテンツに合わせて大きさが変化する
ついでにソート可能なものにしてみました。
item 1
Here is an explanation. You can sort this item, handling each header.
item 2
Here is an explanation. Some of these could be very long but
they are automatically adjusted with the option, heightStyle.
item 3
Here is an explanation.
item 4
Here is an explanation.
item 5
Here is an explanation.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>JQuery UI Accordion</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
#accordion{
width: 100%;
height: 250px;
}
.accordion_item{
width: 400px;
}
</style>
</head>
<body>
<div id="accordion">
<div class="accordion_item">
<h3>item 1</h3>
<div>
Here is an explanation. You can sort this item, handling each header.
</div>
</div>
<div class="accordion_item">
<h3>item 2</h3>
<div>
Here is an explanation. Some of these could be very long but
they are automatically adjusted with the option, heightStyle.
</div>
</div>
<div class="accordion_item">
<h3>item 3</h3>
<div>Here is an explanation.</div>
</div>
<div class="accordion_item">
<h3>item 4</h3>
<div>Here is an explanation.</div>
</div>
<div class="accordion_item">
<h3>item 5</h3>
<div>Here is an explanation.</div>
</div>
</div>
<script>
$(function () {
$('#accordion').accordion({
//begin from all close.
active: false,
//for closing all items
collapsible: true,
//explicit about header of accordion item, which open the item.
header: ">div>h3",
//adjust content size to each accordion item.
heightStyle: "content"
}).sortable({
handle: "h3"
});
$('.ui-accordion-header').css("background","none").css("background-color","rgba(247, 227, 227, 0.8)");
$('.ui-accordion-content').css("background","none").css("background-color","rgba(243, 227, 227, 0.22)");
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿