jQueryUIでアコーディオンを表示します。
まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。
|
1 2 3 |
<script src="http://code.jquery.com/jquery.js"></script> <script src="../js/jquery-ui.min.js"></script> <link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" /> |
アコーディオンにはいろいろなオプションがあります。
| active | 数値（0,1,2…の順で指定、0が一番上） |
| collapsible | true or false |
| event | create,beforeActivate,activate |
| header | 見出し要素を指定 |
header:”h5″というように見出し要素をダブルクォーテーションで囲んで指定します。
activeは未指定の場合、デフォルト0ですが1を指定すると上から2番目のアコーディオンが開いた状態になります。
collapsibleはデフォルトfalseですが、trueにするとアコーディオンを全て閉じることができ、falseだとどれか一つのアコーディオンは開いている状態になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<body> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header:"h5", active:1, collapsible:true, activate: function(event, ui) { console.log(ui.newPanel.context.id); } }); }); </script> <!-- アコーディオン --> <div id="accordion"> <h5>見出し1</h5> <p> 見出し1の内容～<br/> 見出し1の内容～<br/> </p> <h5>見出し2</h5> <p> 見出し2の内容～<br/> 見出し2の内容～<br/> </p> <h5>見出し3</h5> <p> 見出し3の内容～<br/> 見出し3の内容～<br/> </p> </div> </body> |
イベントは1.10で名前が変わり、change→activate,changestart→beforeActivateになっています。
changeなどではエラーにはなりませんが、動作しなくなりました。
jquery.uiの詳細はこちらをどうぞ。
関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
