「jQuery」アコーディオン(Accordion) Widgetを使用するサンプル

2013年7月14日2022年2月22日

書式

jquery.min.js 3.6.0
jquery-ui.min.js 1.12.1
jquery-ui.css 1.12.1

説明
jQuery UIのAccordion Widgetのリンク先

https://api.jqueryui.com/accordion/

使用例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<style>.cft {width:250px;}</style>
<div class="cft" >
      <h3>東京</h3>
      <div><p>東京の説明内容</p></div>
      <h3>大阪</h3>
      <div><p>大阪の説明内容</p></div>
</div>

<script>
$(function() {
      $('.cft').accordion({
       //初期表示でアコーディオンを閉じる
        active : false,
            collapsible: true
      });
});
</script>

結果
「東京」タブをクリックすると下に内容が表示されます。開いた「東京」タブを再度クリックすると閉じます。