クリック（タップ）するとするするっと開閉する「アコーディオン」。
通常のHTMLページだとJQueryを使ったりするので、実装するのがやや面倒ですが、AMPなら驚くほど簡単に実装できます。
手順
拡張コンポーネントを読み込み
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
WordPressのAMPプラグインを使えば自動で読み込みをしてくれるので設定は不要です。
アコーディオン部分をHTMLに記述
<amp-accordion class="accordion" animate>
<!--1つ目のコンテンツ-->
<section>
<h2>AMPでアコーディオンを使う事はできますか？</h2>
<p>JQueryなどを使うよりも遥かに簡単にアコーディオンを使う事ができます！</p>
</section>
<!--2つ目のコンテンツ-->
<section>
<h2>AMPのアコーディオンでアニメーションを入れる事はできますか？</h2>
<p>「animate」と指定するだけでアニメーションを使う事ができます！</p>
</section>
</amp-accordion>
これだけでアコーディオンが動作！
<amp-accordion>にanimate属性を追加するだけで、アコーディオンがアニメーション対応になります。
ただこのままだと見た目がイマイチなので、少しスタイルを整えます。
.accordion section{
border-bottom:1px solid #dfdfdf;
}
.accordion section:first-of-type{
border-top:1px solid #dfdfdf;
}
.accordion h2{
background:#fff;
border:none;
font-size:16px;
padding:10px;
}
/*アコーディオンを開閉した時のフォーカスを外す*/
.accordion h2:focus{
outline:none;
}
.accordion p{
padding:10px;
font-size:16px;
}
アコーディオンの開閉状態をチェックしてスタイルを変える
アコーディオンを開くと<section>にexpanded属性が付くので、これを利用すれば開閉状態別にスタイルを変えることが可能です。
「閉じているときは下向きの矢印を表示して、開いているときは上向きの矢印を表示させる」といった事ができます。
ここでは「Font Awesome」を使って、h2の右側に矢印を表示させます。
/* アコーディオンが閉じているとき（通常時） */
.accordion h2::after{
box-sizing: border-box;
font-family: "Font Awesome 5 Free";
content: '\f107';
font-weight: 900;
padding: 14px 10px;
position: absolute;
right: 0;
top: 0;
}
/* アコーディオンが開いているとき */
section[expanded] h2::after{
content: '\f106';
}
最初からアコーディオンを開いた状態にする
<section>に最初からexpanded属性を付けておけば、ページが表示されたときにアコーディオンが開いた状態になります。
<section expanded>
<h2>AMPのアコーディオンでアニメーションを入れる事はできますか？</h2>
<p>「animate」と指定するだけでアニメーションを使う事ができます！</p>
</section>
AMPでアコーディオンを使う際の注意点
便利なアコーディオンですが一部で制約があります。（と言ってもそれほど重くない制約ですが…）
- 開閉させるアコーディオンのコンテンツは<section>タグで囲まないとダメ
- アコーディオンを開閉させる要素は<h1>～</h6>、<header>じゃないとダメ
<section>や見出しタグなどを使わないとアコーディオンが動かないなので、別の場所で使っている<section>や見出しタグとCSSでうまく調整する必要があります。
この記事を書いた人
井上 憲作
1975年生まれ。PCパーツの通販サイト管理者から、大手インターネット広告代理店にて、100社以上のコンサルティングやSEO施策に従事したのち、2018年に独立。趣味はスキューバダイビング。
