替换div（jQuery + Javascript）

Question

See the following code:

 function replace() { document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display="block"; } 

 <button onclick="replace();return false"/>Click to Replace</button> <div id = "div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div> <div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div> 

When you press the button 'Click to Replace', I want it to change text to something like "Change back". In other words, it will be a loop with possibility to change text without stopping.

If someone can teach me a solution for it, I would be very grateful.

Answer 1

Here is your Answer

 $(document).ready(function(){ $('button').click(function() { if($(this).text()=="Click to Replace"){ $(this).text("Change back"); $('#div1').hide(); $('#div2').show(); } else{ $(this).text("Click to Replace"); $('#div1').show(); $('#div2').hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <button/>Click to Replace</button> <div id = "div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div> <div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div> 

Answer 2

 function replace(id) { if(id.innerHTML == "Click to Replace" ) { id.innerHTML = "Change back"; document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display="block"; } else { id.innerHTML = "Click to Replace"; document.getElementById("div2").style.display="none"; document.getElementById("div1").style.display="block"; } } 

 @keyframes fadeIn { to { opacity: 1; } } .fade-in { opacity: 0; animation: fadeIn .5s ease-in 1 forwards; } 

 <button onclick="replace(this);return false"/>Click to Replace</button> <div id = "div1" class="fadeIn fade-in" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div> <div id = "div2" class="fadeIn fade-in" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div>