jQuery：隐藏div并在其位置显示另一个

Question

I know this question has been asked before, but all the other answers I found are way too complicated for me to understand. When you click a button, I need one section to disappear and another to show in its place.

How can I do this with jQuery?

Here's the outline of my code:

 <div class="container"> <div class="hide"> <button class="btn btn-block btn-primary rounded-0 mb-2">Button</button> <button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button> </div> <div class="show mt-3"> <form> <div class="form-group mb-2"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> </div> <button class="btn btn-block btn-primary rounded-0">Button</button></div> </form> </div> </div> 

What do I need to do CSS and jQuery-wise to make this work? So the second section (.show) appears exactly where the first one was?

Answer 1

You need to bind a click event to the button, .show() the section you want to show and .hide() the one you want to hide.

$('.btn').on('click', function() {
   $('div-to-show').show();
   $('div-to-hide').hide();
});

Example below:

 $('#btn').on('click', function() { $('.hide').hide(); $('.show').show(); }); 

 .hide { display: block; } .show { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Click Me</button> <div class="hide"> <button class="btn btn-block btn-primary rounded-0 mb-2">Button</button> <button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button> </div> <div class="show mt-3"> <form> <div class="form-group mb-2"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> </div> </form> </div> 

Answer 2

First, your HTML has an error in it. You have an extra closing div just before your closing form .

One of your div elements will default to be hidden and the other to be shown. Then upon your trigger (button click) we swap the display of both.

 // Get references to the two areas var divs = $("#div1, #div2"); // When the "trigger" button is clicked, toggle the hidden class on both elements $("#btnShowHide").on("click", function(){ divs.toggleClass("hidden"); }); 

 .hidden { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="hidden" id="div1"> <button class="btn btn-block btn-primary rounded-0 mb-2">Button</button> <button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button> </div> <div class="show mt-3" id="div2"> <form> <div class="form-group mb-2"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> </div> <button class="btn btn-block btn-primary rounded-0">Button</button> </form> </div> <button id="btnShowHide" type="button">Click to toggle display</button> </div>