2016.02.19
WEB制作

[WEB] アコーディオンの今

posted by wada

マイクロソフトが実質IE最新以外のサポートを終了したことによって、Javascript,CSS,HTMLの書き方が大きく変わりつつあります。

そこで今回は最新ブラウザのみをサポートする場合の、アコーディオン表示方法を考えたいと思います。

日本語が苦手なのでソース書きます。

HTML(JADE)

Javascript(coffee script)

これで、.accordion_trgの「アコーディオンを開閉」をクリックする度に.accordion要素のクラスに.openが付いたり消えたりします。

IE最新だけを考えるので、addEventListenr やclassListが使い放題!

(汎用性を持たせる為に、一応クラス内はjQuery無しで書いてます。)

あとはスタイルシートをゴニョゴニョすれば完了です。

CSS(SASS)

ソースがすっきり!

Pocket


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

「依頼するのが初めて、何を相談すればいいの?」
「古くなったホームページ、新しくしたいけどどうすればいいの?」
「ページ滞在時間を伸ばしたい!問い合わせを増やしたい!」

お一人で悩む前に、まずはご相談ください。

CONTACT Storaip