jQuery UI アコーディオン(Accordion)を利用するサンプル

2022年10月18日

環境
Google Chrome　 106.0.5249.119
Windows 10 Home 64bit
jquery 3.6.0
jqueryui 1.12.1

構文
$(セレクター名).accordion({
active : false,
collapsible: true
})
初期表示でアコーディオンを閉じる場合、active : falseを追加します。
ヘッダ部分をクリックすると内容が表示されたり非表示になります。
jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。

使用例

<!DOCTYPE html>

<html>

<head>

<style>

#city {

width:200px;

}

</style>

$(function() {

$('#city').accordion({

active : false,

collapsible: true

});

</script>

</head>

<body>

<div><p>東京の内容</p></div>

<div><p>大阪の内容</p></div>

<div><p>福岡の内容</p></div>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <style> #city { width:200px; } </style> <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> <script> $(function() { $('#city').accordion({ active : false, collapsible: true }); }); </script> </head> <body> <div id="city" > <h3>東京</h3> <div><p>東京の内容</p></div> <h3>大阪</h3> <div><p>大阪の内容</p></div> <h3>福岡</h3> <div><p>福岡の内容</p></div> </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#city {
  width:200px;
}

</style>
<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>
<script>
$(function() {
      $('#city').accordion({
    active : false,
            collapsible: true
      });
});
</script>
</head>
<body>
<div id="city" >
      <h3>東京</h3>
      <div><p>東京の内容</p></div>
      <h3>大阪</h3>
      <div><p>大阪の内容</p></div>
      <h3>福岡</h3>
      <div><p>福岡の内容</p></div>
</div>

</body>
</html>

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

jQuery

Posted by arkgame

関連投稿: