※ 2023/9/17 codepenの表示を修正しました
さて今回は、ボタンの表示非表示をするjQueryを書いていきます。
イメージしにくいので一体なんの役に立つの？と思うかもしれませんが、ボタンを押した時に「onclick=””」で違う関数を実行することができますし、要素の表示非表示で割と使うことおおいんですよね。できればしたくはないんだけど、、、
先に完成品がこちら！
ボタンをクリックすると、ボタン01とボタン02が交互に表示されます。これは2つのボタンを表示非表示繰り返してるだけの簡単な動きをしています。
See the Pen ボタンを表示非表示繰り返す by Chankei (@Chankei) on CodePen.
今回のHTMLとCSS、注目は1つのボタンしか表示されていないところ
今回使うHTMLはこんな感じになります。button要素をクリックした時にjQueryが実行される動きを想定しています。
そして、片方のボタンを「display: none」で非表示にしています。どちらかを非表示にしておくことが大事な部分なので、お忘れなく。
「.js-btn」このクラスに対してjQueryを適用していきます。
See the Pen ボタンを表示非表示繰り返す by Chankei (@Chankei) on CodePen.
See the Pen ボタンを表示非表示繰り返す by Chankei (@Chankei) on CodePen.
jQuery、覚えておきたい「toggle()」の動き
See the Pen ボタンを表示非表示繰り返す by Chankei (@Chankei) on CodePen.
今回のjQueryはとっても短いです。素敵ですね。
「toggle()」の部分でクリックされると、表示非表示が反転します。シンプルな動きで簡単ですね！
toggle()の直前の、「$(‘.js-btn’)」この部分ですが、ついつい「this」を入れてしまいがちですが、今回はあえてクラス名を入れてあげてください。
もしthisを入れると、クリックされた要素にしか動きが反映されないためクリックしたボタンが消えるだけになってしまいます。。。
まとめ
とっても簡単にボタンの表示非表示をすることができました！
使い方しだいでは、用途が多いと思いますのでぜひ何かに役立てていただければと思います！
toggle()は、似たようなもので「toggleClass()」などがあるので同じような考え方で実装できるのでそちらにも挑戦してみてください。