CODEWITHSUNDEEP
jquerytoggle
B. S.
B. S.

Reputation: 105

jQuery toggle: Hide the first div, show the other div

What I want is the following: I'm making a website, and I want to put some text on the top of the page and a button in the middle of the page. If the user clicks on it, the content above the button (say Div A) hides and the content underneath it (say Div B), which is hidden, will show and the button disappears. What kind of jQuery code do I need for that?

Upvotes: 0

Views: 1630

Answers (2)

Jonathan Petitcolas
Jonathan Petitcolas

Reputation: 4584

EDIT: I have forgotten the button. Here is the modified code.

You create a hidden class and then play with the method toggleClass.

CSS: 

.hidden { display: none; }

JS:

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

Here, the this keyword will refer to the button you are clicking on.

Upvotes: 0

Death
Death

Reputation: 2017

Edited due to points in comments:

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

And of course, style #divB to be display: hidden;

Upvotes: 1

Related Questions