押すたびに切り替わるボタン

2024年1月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「押すたびに切り替わるボタン」を作ってみました。

ボタンの文字が切り替わる

参考：CodePen｜ボタンを表示非表示繰り返す

まずはボタンを2つ用意します。

<button type="button">ボタン1</button>
<button type="button">ボタン2</button>

ボタン2つをbtn-wrapというクラスを付与した<div>で囲み、さらに1個目のボタンにbtn--on、2個目にbtn--off、両方にjs-btnというクラスを付与します。

<div class="btn-wrap">
  <button type="button" class="btn--on js-btn">ひらく</button>
  <button type="button" class="btn--off js-btn">とじる</button>
</div>

CSSを設定します。

.btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--on {
  display: block;
}

.btn--off {
  display: none;
}

スクリプトを設定します。

$(function(){
  $('.js-btn').on('click',function(){
    $('.js-btn').toggle();
  });
});

ここがイマイチよくわかりません。js-btnというクラスを付け外ししている？んでしょうけど、なんでそれで作動するのかな…

疑似要素が切り替わる

よくある、＋と－がアニメーションしながら切り替わるアレをやってみたいと思います。

参考：ジトサイト｜【CSS】プラスとマイナスを作る方法【切り替えアニメーションあり】

ボタンを設置してクラスをplusとしておきます。

<button type="button" class="plus">ボタン</button>

CSSを記述します。

.plus {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.plus::before, .plus::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: #007bff;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.plus:hover::before, .plus:hover::after {
  background-color: #fff;
}

.plus::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .6s;
}

.plus.show::after {
  transform: translateY(-50%) rotate(180deg);
}

スクリプトを記述します。

$(function(){
  $('.plus').click(function(){
    $(this).toggleClass("show");
  });
});

文字と疑似要素両方切り替わる

上記2つを併用してみましょう。

ボタン2つを囲むbtn-wrapに疑似要素を設定すればいけそうです。

<div class="btn-wrap2">
  <button type="button" class="btn--on js-btn">ひらく</button>
  <button type="button" class="btn--off js-btn">とじる</button>
</div>

.btn-wrap2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wrap2::before, .btn-wrap2::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.btn-wrap2::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .6s;
}

.btn-wrap2.show::after {
  transform: translateY(-50%) rotate(180deg);
}

$(function(){
  $('.btn-wrap2').click(function(){
    $(this).toggleClass("show");
  });
});

スマホだとホバーの挙動がうまく反映されないので、疑似要素の色は白で固定しました。

疑似要素自体をクリックすると挙動がおかしくなるので、pointer-events:noneで無効化しておきます。

まとめ

アコーディオンの開閉ボタンに使えそうですね（ていうかそれ以外何に使うのか）

＋が回転して✕になるやつにも挑戦してみたいです。