アコーディオン作成方法
「jquery.min.js」をダウンロード致します。
ダウンロード先
jQueryアコーディオン
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#sample { width: 500px; } #sample > dt { border-bottom: solid 1px white; background-color: #00BCD4; color: white; cursor: pointer; padding: 10px; font-weight: bold; } #sample > dd { border: solid 1px Silver; margin: 0px; padding: 10px; } |
|
1 2 3 4 5 6 7 8 |
<dl id="sample"> <dt>タイトル</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>タイトル</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>タイトル</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { //最初は全てのパネルを非表示に $('#sample > dd').hide(); $('#sample > dt') .click(function(e){ //選択したパネルを開く $('+dd', this).slideToggle(500); }) }); </script> |
参考サイト
