BLOG

ブログ

AMPサイトでのアコーディオン

AMPサイトでのアコーディオン

クリックすることで開閉することができます
モバイルでのメニューなどに使用すると効果的だと言えます

head内に <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> を記述する

amp-accordionの次はsectionにする
sectionの中には2つの要素を入れなくてはいけない
1つ目は開閉ボタンとなる。(h1,h2,h3,h4,h5,h6,headerのうちのどれか)
2つ目の要素はコンテンツの内容になります


<amp-accordion>

<!-- 1つ目のコンテンツ -->
<section>
<h2>コンテンツを開閉するボタン</h2>
<p>コンテンツの内容になる部分</p>
</section>

</amp-accordion>

アコーディオンをデフォルトで開いたままにしたい場合にはexpandedを使用する
<amp-accordion>

<!-- 1つ目のコンテンツ -->
<section expanded>
<h2>コンテンツを開閉するボタン</h2>
<p>コンテンツの内容になる部分</p>
</section>

</amp-accordion>

アコーディオンの開閉状態は勝手に保存されてしまいます。
保存されないためにはdisable-session-statesを使用する

<amp-accordion disable-session-states>

<!-- 1つ目のコンテンツ -->
<section expanded>
<h2>コンテンツを開閉するボタン</h2>
<p>コンテンツの内容になる部分</p>
</section>

</amp-accordion>

アコーディオンの開いた状態と閉じた状態で開閉ボタンのテキストを変えることができます
<amp-accordion>
<section>
<h2><span id="open">開く</span><span id="close">閉じる</span></h2>
<p>コンテンツの内容です。</p>
</section>
</amp-accordion>

cssは以下の通りです
/* 開いた状態のcss */
section[expanded] #open {
display: none ;
}
/* 閉じた状態のcss */
section:not([expanded]) #close {
display: none ;
}
▲PAGE TOP

©ITコンサルタントの網樹屋