jQuery UI アコーディオンのサンプル(Accordion)

jQuery UIのアコーディオンのサンプルです。
Accordion Widgetを使用します。

Accordion Widget
アコーディオンのサンプル
初期表示でアコーディオンを閉じる
折りたたみが不可のサンプル

Accordion Widget

jQuery UIのライブラリです。
ヘッダ部分をクリックすると内容が表示されたり非表示になります。
jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
以下はjQuery UIのAccordion Widgetのリンクです。
http://api.jqueryui.com/accordion/

アコーディオンのサンプル

アコーディオンのサンプルです。
タブをクリックすると下に内容が表示されます。開いたタブを再度クリックすると閉じます。

A

A内容

B

B内容

C

C内容

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>#div1 {width:300px;}</style>

<div id="div1" >
	<h3>A</h3>
	<div><p>A内容</p></div>
	<h3>B</h3>
	<div><p>B内容</p></div>
	<h3>C</h3>
	<div><p>C内容</p></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$('#div1').accordion({
		collapsible: true
	});
});
</script>

初期表示でアコーディオンを閉じる

初期表示でアコーディオンを閉じる場合、active : falseを追加します。

$(function() {
	$('#div1').accordion({
		active : false,
		collapsible: true
	});
});

折りたたみが不可のサンプル

上記コードの18行目のcollapsibleがない場合は、アコーディオンの折りたたみが不可になります。開いたタブを再度クリックしてもタブが閉じません。

	$('#div1').accordion({
	});

サンプルです。

A

A内容

B

B内容

C

C内容