Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Accordion

jQuery UI

今回は、jQuery UIのAccordionについて書きます。


Accordionを使うと、折りたたみ式のインターフェースが作れます。

このように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

	<div id="accordion">

		<h1><a href="">タイトル1</a></h1>
		<div>テスト１</div>

		<h2><a href="">タイトル2</a></h2>
		<div>テスト２</div>

		<h3><a href="">タイトル3</a></h3>
		<div>テスト３</div>

	</div>

<script>
$(function(){
	$('#accordion').accordion();	
});
</script>
</body>
</html>

実行結果↓
f:id:gupuru:20140214224844p:plain


「.accordion();」をつけると、Accordionを使用できるようになります。

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

注意が必要なのは、HTMLの部分です。
このような順番で書かないと、実装できません↓

<h1><a href="">タイトル1</a></h1>
<div>テスト１</div>

参考サイト
Accordion | jQuery UI