Hiding a div to show another using jQuery

Question

basically what I am trying to do is to hide a div1 when clicking on a button inside the same div1, after that div1 is hidden I want a div2 to show at the same place, that div2 is going to have another button that will bring you back to the div1. I want to be able to perform this with jquery.

my html look like this:

<div class="div1">
  <h2>Nonono...</h2>
  <br>
  <p>bla bla bla bla... </p>
  <button class="lalala-btn">Go to lalala</button>
</div>

<div class="div2">
  <h2>lalala..</h2>
  <br>
  <ul>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
  </ul>
  <button class="nonono-btn">Go to nonono</button>
</div>

My css:

.div1 {
  position: absolute;
  display: block;
  visibility: visible;
}

div2 {
  position absolute;
  display: block;
  visibility: hidden;
}

my jQuery look like this:

$(document).ready(function() {

  //function that hides the div1 and shows the div2
  $(".lalala-btn").click(function(){
    $(".div1").hide(1000);
    $(".skills").show(1000);
  });
});

but this doesn't work, I also would have to create the second part to make it go back to div1

Answer 1

If you must use what you've started with here's a solution that works. Your code was close, so most the changes were related to CSS and some typos, then adding a click handler for the 2nd div.

 $(document).ready(function() { //function that hides the div1 and shows the div2 $(".lalala-btn").click(function(){ $(".div1").hide(1000); $(".div2").show(1000); }); $(".nonono-btn").click(function(){ $(".div2").hide(1000); $(".div1").show(1000); }); }); 

 .div1 { position: absolute; top: 0; display: block; visibility: visible; } .div2 { position: absolute; top: 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <h2>Nonono...</h2> <br> <p>bla bla bla bla... </p> <button class="lalala-btn">Go to lalala</button> </div> <div class="div2"> <h2>lalala..</h2> <br> <ul> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> </ul> <button class="nonono-btn">Go to nonono</button> </div> 

Answer 2

It would be easier to toggle click for both of them on the same class.

 $(".lalala-btn").click(function (){ $(".div1").toggle(1000); $(".div2").toggle(1000); }); 

 .div1 { position: absolute; top: 0; display: block; } .div2 { position: absolute; top: 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <h2>Nonono...</h2> <br> <p>bla bla bla bla... </p> <button class="lalala-btn">Go to lalala</button> </div> <div class="div2"> <h2>lalala..</h2> <br> <ul> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> </ul> <button class="lalala-btn">Go to nonono</button> </div>