jsについて

質問

jsのプログラムで質問があります。
p id1を押したらテスト1が表示されますが、p id2を押したら1が表示されたまま2が表示されてしまいます。

2を押したら1を隠して2を表示させたいのですが、やり方を教えてください。
3も、同じようにしたいです。
<p id="p1">テスト１</p>
<p id="p2">テスト2</p>
<p id="p3">テスト3</p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<input type="button" id="button3" value="ボタン3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
// 初期表示を非表示にする
$('#p1').hide();

// 初期表示を非表示にする
$('#p2').hide();

// 初期表示を非表示にする
$('#p3').hide();

$("#button1").click(function() {
// 表示する
$("#p1").show();
});

$("#button2").click(function() {
// 表示する
$("#p2").show();
});

$("#button3").click(function() {
// 表示する
$("#p3").show();
});

});
</script>

回答No.1

AsarKingChang · ベストアンサー

>p id2を押したら1が表示されたまま2が表示されてしまいます。
2には、1を消すという処理がないからですね。
なので、今3個あるなら、例として「２」なら、
$('#p1').hide();
$('#p2').show();
$('#p3').hide();
と、その他を隠すようにすればOKですよ。

補足

ご回答ありがとうございます。
後々増やす予定（表示させたり隠したりする部分）があるのですが

hideは（表示するもの以外をhideにする）とかできますか？