2016.04.13

2017.05.16

Web制作

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

ドアノブ

よくある質問などでよくある見出しをクリックすると開閉する仕組みは以外と簡単に実装できます。
下のサンプルを確認してみてください。”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に関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する