jquery - jQuery トグル: 最初の div を非表示にし、他の div を表示する

Question

私が欲しいのは次のとおりです。私はウェブサイトを作成しています。ページの上部にテキストを配置し、ページの中央にボタンを配置したいと考えています。ユーザーがそれをクリックすると、ボタンの上のコンテンツ (Div A など) が非表示になり、その下の非表示のコンテンツ (Div B など) が表示され、ボタンが消えます。そのためにはどのような jQuery コードが必要ですか?

Answer 1

コメントのポイントにより編集されました：

<div id="divA">
    Contents
    <input type="button" onclick="$('#divA').hide();$('#divB').show();" />
</div>
<div id="divB">
    More Contents.
</div>

そしてもちろん、#divBあるべきスタイルdisplay: hidden;

Answer 2

編集：ボタンを忘れました。これが変更されたコードです。

隠しクラスを作成してから、メソッドtoggleClassで遊んでいます。

CSS:

.hidden { display: none; }

JS:

$("#myButton").click(function() {
  $("#divA, #divB").toggleClass("hidden");
  $(this).addClass("hidden");
});

ここで、thisキーワードは、クリックしているボタンを参照します。