input で表示の切り替えをしたい

Question

題名通りなんですが、input　をクリックしたら<div class="b">を表示させて<div class="a">を非表示にする。
もう一回クリックすると戻るようにするにはどうしたらいいですか？
同じボタンで切り替えるのに、show()は使わない方がいいですか？
Toggle　を使ったやり方が分からなくて、、、
できればjqueryでやりたいです。

<input type="checkbox" id="abc">
		  <label for="abc">
			<img src="img/11.png">
          </label>
        
        <div class="a">
            <textarea name="chat_message" required></textarea>
       </div>
        <div class="b">
           <input type="file" name="p_message">
   </div>
<script>

$(function(){
	 $(".b").hide();
  //ボタンのイベント
  $("#abc").click(function() {
    //sampleクラスを表示非表示で切り替える
    $(".b").show(); 
	 $(".a").hide();
  });
});
</script>	

Answer 1

エレメントの表示・非表示判定に参考になるWebページがありました。
このページを参考にすると、表示制御ができるかと思います。

jQueryで要素の表示・非表示を判定する方法

同じボタンで切り替えるのに、show()は使わない方がいいですか？

「show()」を使っても問題ないと思います。

Toggle　を使ったやり方が分からなくて、、、

toggleは表示されているときは非表示に、非表示の場合は表示します。
下記例では、「id = "sample"」としたエレメントが表示されている場合は非表示になります。
逆に非表示になっている場合は表示されます。

$('#sample').toggle();

Jquery manual(toggle)

Comments

[ayuayuayu]

$('.b').toggle();
$('.a').toggle();
これで出来ました！ありがとうございました！！