アコーディオンメニューを作ってみた【jQuery】【Material icons】
こちらの記事ではアコーディオンメニューにおけるメニューの開閉状態を示す矢印をCSSの擬似要素で作っていました。
他の方法として思いついたのは、googleのMaterial icons の利用です。
fonts.google.com
実行結果(上記記事のコードを利用させていただいています。)
See the Pen
by sk (@sk232423)
on CodePen.
<span class="material-icons-outlined">expand_more</span> <span class="material-icons-outlined">expand_less</span>
spanタグで囲う文字によりアイコンの種類を指定します。このときexpand_moreが下向きのアイコンを表しているので、javascriptでクリックイベントを検知し、spanタグが囲う文字がexpand_moreだった場合にexpand_lessに入れ替え、上向きのアイコンにします。再びクリックされた際にその逆を行うという原理です。
