アコーディオン
概要
ユーザーが任意に開閉して、一度に見える表示量を調節できるようにします。
※アコーディオンのデザインについては、適時SCSS（module.scss）を改変してください。
デザイン
以下はサンプルです。用途を定めてデザインしてください。
TYPE A
用途：案件ごとに設定してデザインしてください。
<div class="accordion typeA">
<dl class="closed">
<dt><button type="button" class="opnerBtn"><span>タイトル</span></button></dt>
<dd>
<ul>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
</ul>
</dd>
</dl>
</div>TYPE B
用途：案件ごとに設定してデザインしてください。
<div class="accordion typeB">
<dl class="closed">
<dt><button type="button" class="opnerBtn"><span>タイトル</span></button></dt>
<dd>
<ul>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
</ul>
</dd>
</dl>
</div>TYPE C
用途：案件ごとに設定してデザインしてください。
<div class="accordion typeC">
<dl class="closed">
<dt><button type="button" class="opnerBtn"><span>タイトル</span></button></dt>
<dd>
<ul>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
<li><button type="button">中身</button></li>
</ul>
</dd>
</dl>
</div>改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。
- Javascript:
- tips.js / accordionBtn()関数