ampサイトで、アコーディオン を使うには2つ方法があります。
- amp-accordionを使う方法
- cssだけでアコーディオン を実装する方法
どちらも、同じように使えます
amp-accordionを使う場合
まず、チェックするべきは、下記の2つのサイト。
ampプロジェクトサイト(最新情報が反映されている)
AMPのデモやサンプルがあるサイト
日本語訳のサイトもありますが、英語のサイトでグーグル翻訳を使うだけでも、ほぼ内容が理解できます。
簡単な説明
amp-accordionを有効化します。
<head>から</head>の中に次を入れてください。
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
htmlとcss(scss)の例
disable-session-states をamp-accordionのタグに挿入すると、リロードされたとき、アコーディオンが閉じて表示されます。
animate をamp-accordionのタグに挿入すると、アコーディオンの開閉にアニメーションがつきますが、詳細の設定ができないので、アニメーションを重視するなら、下記の「cssだけで実装する場合」で設定しましょう。
ちなみに、上のサンプルは、下記のサイトで使用しているものから抜粋しました。私のサイトなので、著作権とか問題なしですからね。
cssだけで実装する場合
cssだけで実装するには、まず、input要素を使えるようにしないといけません。
そこで、amp-formとamp-mustacheを有効化します。
amp-formだけでも大丈夫です。
ただ、私は心配性なので、エラーが出なくても、一応有効にしてあります。
<head>から</head>の中に次を入れてください。
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
amp-formについての詳細は、下記の2つのサイトを見てくださいね。
ここまで、できたら、後は、html5で実装するときと同じようにすればいいだけ。
参考までにhtmlとcssを書いておきます。
複数使うときは、<label for=”label1″ >と、<input type=”checkbox” id=”label1″ class=”accordion_css” />のforとidを同じものに変えてください。
例)<label for=”label2″ > <input type=”checkbox” id=”label2″ class=”accordion_css” />
絶対に忘れてはいけない注意点
アコーディオンを使うとき、heightとmax-heightの設定に注意!
アコーディオン要素の上の要素でmax-height,heightを設定していると、途中でオーバーフロー(アコーディオンで広げた文字や画像が重なるor消える)ことに!
コレを忘れてて、見つけるのに、2時間も掛かった・・・