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/

サンプル

Accordion Widgetのサンプルです。

A

A内容

B

B内容

C

C内容

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのaccordionのサンプル</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#test1 { width: 300px; }
</style>
<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() {
	$('#test1').accordion({
		collapsible: true
	});
});
</script>
</head>
<body >
<div id="test1" >
	<h3>A</h3>
	<div>A内容</div>
	<h3>B</h3>
	<div>B内容</div>
	<h3>C</h3>
	<div>C内容</div>
</div>
</body>
</html>

collapsibleがない場合

上記サンプルコードの15行目のcollapsibleがない場合は、アコーディオンの折りたたみが不可になります。

	$('#test1').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)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る