Cacher un div pour montrer un autre en utilisant jQuery

Question

fondamentalement ce que j'essaye de faire est de cacher un div1 en cliquant sur un bouton dans le même div1, après que div1 est caché je veux un div2 montrer au même endroit, que div2 va avoir un autre bouton qui vous ramènera au div1. Je veux être en mesure d'effectuer cela avec jquery.

mon regard html comme ceci:

<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> 

Mon css:

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

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

mon jQuery ressembler à ceci:

$(document).ready(function() { 

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

mais cela ne fonctionne pas, je voudrais aussi avoir à créer la deuxième partie pour le faire revenir à div1

Answer 1

Il serait plus facile de basculer cliquez pour deux d'entre eux sur la même classe.

$(".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>

Answer 2

Si vous devez utiliser ce que vous avez commencé avec voici une solution qui fonctionne. Votre code était proche, donc la plupart des changements ont été liés à CSS et quelques fautes de frappe, puis en ajoutant un gestionnaire de clic pour la 2ème 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>