CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Retros
Retros

Reputation: 3611

jQuery: Hide div and in its place show another

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?

Upvotes: 0

Views: 96

Answers (2)

apires
apires

Reputation: 927

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>

Upvotes: 6

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 0

Related Questions