ウェブ学のすすめ

Study of Web Design & Programing

jQuery UIでアコーディオンメニュー

プレビュー


スマートフォンの方はこちらからプレビューできます。
jQuery UIでアコーディオンメニュー - js do it

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery UIでアコーディオンメニュー</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<h1>はじめてのjQuery UI</h1>
<h2 class="demoHeaders">アコーディオン</h2>
<div id="accordion">
    <div>
	<h3><a href="#">テスト1</a></h3>
	<div>テストテストテストテストテストテストテストテストテストテストテストテスト</div>
    </div>
    <div>
	<h3><a href="#">テスト2</a></h3>
	<div>テストテストテストテストテストテストテストテストテストテストテストテスト</div>
    </div>
    <div>
	<h3><a href="#">テスト3</a></h3>
	<div>テストテストテストテストテストテストテストテストテストテストテストテスト</div>
    </div>
</div>
</body>
</html>
JavaScript
$(function(){
    $("#accordion").accordion({ header: "h3" });
});

ポイント

ダウンロードしたjQueryjQuery UIファイルを使う代わりに、GoogleがCDN(Content Delivery Network)として提供しているGoogle Libraries APIを試してみました。

Make the Web Faster ― Google Developers