【jQuery】プラグインなしで簡単にアコーディオンを作る方法。
アコーディオンメニューを作成する場合、jQueryを使用すれば簡単に作成できます。
まずはデモ。
クリックするとjQueryの「slideToggle」で見えない部分を表示させます。
「slideToggle」は、clickイベント等と併用してクリックするとアニメーションでdisplay:none、またはdisplay:blockにしてくれるすぐれものです。
また、ボタンが変化するように「addClass」と「removeClass」でclassの削除、追加をしています。
以下ソースです。
【CSS】
【JavaScript】
【HTML】
スマホなどになると、表示させる部分が限られたりします。
アコーディオン等でユーザビリティを向上させましょう。
まずはデモ。
■デモ
クリックするとjQueryの「slideToggle」で見えない部分を表示させます。
「slideToggle」は、clickイベント等と併用してクリックするとアニメーションでdisplay:none、またはdisplay:blockにしてくれるすぐれものです。
また、ボタンが変化するように「addClass」と「removeClass」でclassの削除、追加をしています。
以下ソースです。
【CSS】
.accordion > dl > dt { padding: 0px 10px; } .accordion > dl > dt, .accordion > dl > dd > ul > li, .accordion > ul > li { border-bottom: 1px solid #BDBDBD; height: 63px; line-height: 63px; position: relative; } .accordion > dl > dt:after { content: "+"; position: absolute; right: 10px; top: 50%; line-height: initial; margin: -14px 0 0; font-size: 20px; font-weight: bold; } .accordion > dl > dt.dopen:after { content: "-"; } .accordion > dl > dd { background-color: #424242; display: none; } .accordion > dl > dt, .accordion > dl > dd > ul > li, .accordion > ul > li { border-bottom: 1px solid #BDBDBD; height: 63px; line-height: 63px; position: relative; } .accordion >dl > dd > ul > li:after { content: ""; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 15px; margin: -4px 0px 0px; } .accordion > dl > dd a, .accordion > ul > li a { display: block; padding: 0px 20px; box-sizing: border-box; color:#fff; }
【JavaScript】
$(function(){ $('.accordion > dl > dt').on('click',function(){ var Dopenclass = $(this).attr('class'); $(this).next('dd').slideToggle(); if(!Dopenclass){ $(this).addClass('dopen'); }else{ $(this).removeClass('dopen'); } }); });
【HTML】
<div class="accordion"> <dl> <dt>メニュー1</dt> <dd> <ul> <li><a href="">メニュー1の情報1</a></li> <li><a href="">メニュー1の情報2</a></li> <li><a href="">メニュー1の情報3</a></li> </ul> </dd> </dl> <dl> <dt>メニュー2</dt> <dd> <ul> <li><a href="">メニュー1の情報1</a></li> <li><a href="">メニュー1の情報2</a></li> <li><a href="">メニュー1の情報3</a></li> </ul> </dd> </dl> </div>
スマホなどになると、表示させる部分が限られたりします。
アコーディオン等でユーザビリティを向上させましょう。
著者:poroa | 投稿日:2016年09月05日 | カテゴリ:jQuery