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なので山王にしてください。