【jQuery】表示する内容を切り替える、1行プログラム【410日目】

こんなとき使う

ボタンをクリックしたら、表示する文字を切り替えたい。

表示する内容を切り替えたいとかは良くあります。

show()や hide()を使うのもありですが、たくさん切り替えるとかも面倒なので、
1行ですっきり書いてみましょう

<button id="btn_before_after">Toggle</button>
<p class="before_after">before</p>
<p class="before_after" style="display: none">after</p>

beforeのpタグと、afterのpタグがあります。afterの文字は、display:noneで非表示です。

$("#btn_before_after").click(function () {
  $(".before_after").toggle();
});

ボタンをクリックしたら、toggle関数が動きます。
toggleは、非表示を表示に。表示を非表示に入れ替えます。

いつもだと、表示するものと非表示のものをクラスで分けたり、今の状態がどちらを表示しているかをチェックするコードを書いたりする必要があるので、簡単ですね！