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

jQuery UIのアコーディオンのサンプルです。
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/1.12.4/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>

 

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

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

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

サンプルです。

A

A内容

B

B内容

C

C内容

関連の記事

jQuery UI カレンダーから日付を入力するサンプル(datepicker)
jQuery UI ダイアログを開くサンプル(Dialog)
jQuery UI タブのサンプル(tabs)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery UI 要素をドラッグ・アンド・ドロップする(draggable/droppable)

△上に戻る