アコーディオンメニューはサイトの様々な箇所で使われるため、ページの中で複数箇所に設置でき、CSSで容易に装飾を変更できるものを作りました。
特に、アコーディオンのコンテンツの高さをcssで都度指定の必要がないことも使い回しのポイントです。
動作デモ
See the Pen アコーディオンメニュー by masato yamada (@marchin133) on CodePen.
#使い方
JavaScriptを読み込み、cssに追記します。
##JavaScript
別ファイルなどにして読み込んでください
document.addEventListener('DOMContentLoaded', function () {
var acodionMenu = document.querySelectorAll('.acdn');
var acodionContentHight = [];
for (var i = 0; i < acodionMenu.length; i++) {
acodionContentHight[i] = acodionMenu[i].nextElementSibling.clientHeight + "px";
acodionMenu[i].nextElementSibling.style.height = acodionContentHight[i];
if (acodionMenu[i].nextElementSibling.classList.contains('acdn_close')) {
acodionMenu[i].nextElementSibling.style.height = '0px';
}
acodionMenu[i].addEventListener('click', function () {
var clickitem = Array.prototype.indexOf.call(acodionMenu, this);
if (this.nextElementSibling.classList.contains('acdn_close')) {
this.nextElementSibling.style.height = acodionContentHight[clickitem];
} else {
this.nextElementSibling.style.height = '0px';
}
this.classList.toggle('acdn_open');
this.classList.toggle('acdn_close');
this.nextElementSibling.classList.toggle('acdn_open');
this.nextElementSibling.classList.toggle('acdn_close');
}, false);
}
}, false);
##html
１）アコーディオンの開閉に使う要素に、.acdn クラスをつけてください。
２）ページが表示されたときに閉じているときは.acdn_close も付与してください。逆に展開しているときは.acdn_openをつけてください。
３）.acdnが付けられた要素の次の要素がアコーディオンとして機能します。その要素に展開状態を示す.acdn_closeまたは.acdn_openを付与してください。
４）htmlはこれだけです。
<div class="menu_title acdn acdn_close">アコーディオンメニュー１</div> <!-- 閉じた状態で表示させたい場合 -->
<div class="menu_content acdn_close">
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
</ul>
</div>
<div class="menu_title acdn acdn_open">アコーディオンメニュー2</div> <!-- 開いた状態で表示させたい場合 -->
<div class="menu_content acdn_open">
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
</ul>
</div>
<div class="menu_title acdn acdn_open">アコーディオンメニュー2</div>
<div class="menu_content acdn_open">
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
</ul>
</div>
##CSS
１）.menu_title クラス名不問 アコーディオンの開閉として使用する要素です。自由に装飾してください。jsでクリックイベントが付きますので、面積があったほうがいいです。
２）.menu_content クラス名不問 アコーディオンで高さを、もともとの高さ→0pxになる要素です。必要に応じて装飾ください。
overflow: hidden; この内側の要素を消す（見えなくする）ために必要です。
transition: all 0.5s ease-out; トランジションはお好きな数値に変更などしてください。設定しないとアニメーションしません。
３）要素に.acdn_closeまたは.acdn_openが付与されることを利用して、展開時や縮小時に表現を変えることができます。
例：サンプルでは押された要素（.menu_title）の背景色を変えています。
.menu_title{
width:400px;
height: 50px;
}
.menu_content{
width:400px;
overflow: hidden;
transition: all 0.5s ease-out;
}
.menu_title.acdn_open{
background-color: #cccccc;
}
##動作のしくみ
.acdnが付けらた要素にクリックイベントを付け、その次の要素の高さを取得しています。
一度高さを格納したあとに、.acdn_closeがついている要素については高さを0pxに設定して閉じた状態にしています。
高さが画面描画後に動的に変更されない限り、アコーディオンコンテンツの中身の高さを調べてcssに記述することなく、トランジションさせることができます。
クリックイベントが起きるたび、要素に.acdn_closeまたは.acdn_openを都度付けたり消したりすることで動きを実現しています。
コードが冗長であるなど、ご指摘いただけると嬉しいです。