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="#">テスト１</a></h3> <div>テストテストテストテストテストテストテストテストテストテストテストテスト</div> </div> <div> <h3><a href="#">テスト２</a></h3> <div>テストテストテストテストテストテストテストテストテストテストテストテスト</div> </div> <div> <h3><a href="#">テスト３</a></h3> <div>テストテストテストテストテストテストテストテストテストテストテストテスト</div> </div> </div> </body> </html>
JavaScript
$(function(){ $("#accordion").accordion({ header: "h3" }); });
