アコーディオン

概要

ユーザーが任意に開閉して、一度に見える表示量を調節できるようにします。
※アコーディオンのデザインについては、適時SCSS（module.scss）を改変してください。

デザイン

以下はサンプルです。用途を定めてデザインしてください。

TYPE A

用途：案件ごとに設定してデザインしてください。

<div class="accordion typeA">
<dl class="closed">
<dt><button type="button" class="opnerBtn" aria-expanded="false"><span>タイトル</span></button></dt>
<dd hidden>
<ul>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
</ul>
</dd>
</dl>
</div>

TYPE B

用途：案件ごとに設定してデザインしてください。

<div class="accordion typeB">
<dl class="closed">
<dt><button type="button" class="opnerBtn" aria-expanded="false"><span>タイトル</span></button></dt>
<dd hidden>
<ul>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
</ul>
</dd>
</dl>
</div>

TYPE C

用途：案件ごとに設定してデザインしてください。

<div class="accordion typeC">
<dl class="closed">
<dt><button type="button" class="opnerBtn" aria-expanded="false"><span>タイトル</span></button></dt>
<dd hidden>
<ul>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
<li><a href="#">中身</a></li>
</ul>
</dd>
</dl>
</div>

改変対象ファイル

CSS:: _ul.scss 内に改変対象箇所があります。
_ul.scssは、本番へは反映せずに、必要なUIのコードを_modules.scssに追加してください。

Javascript:: accordionBtn()関数
必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。