Web制作

1行のJQueryでできる開閉する仕組み

2016.04.13

2017.05.16

ドアノブ

よくある質問などでよくある見出しをクリックすると開閉する仕組みは以外と簡単に実装できます。
下のサンプルを確認してみてください。”btn”というクラスをクリックするとその次の要素が開閉するJSです。

See the Pen btn01 by tetsuro (@tetsuro) on CodePen.

クリックする度にボタンに特定のクラスを付け外しをする。

ボタンのクリックの度に見た目を変更するためにボタンに特定のクラスを付け外しをできるようにします。

See the Pen btn02 by tetsuro (@tetsuro) on CodePen.

スマートホンでのみ実行する

レスポンシブサイト等でスマートホンのみで開閉の仕組みを実装したいとき等があります。その場合はウインドウ幅を取得してブレークポイントよりも小さい時にJSが動作するようにします。

動作確認する場合はブラウザ幅を調整して実行してみてください。

See the Pen btn03 by tetsuro (@tetsuro) on CodePen.

非常に簡単なJSながら様々なシーンで使用できるJSなので山王にしてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。