CODEWITHSUNDEEP
javascriptjqueryhtmlreplace
Musa
Musa

Reputation: 65

Replace div (jQuery + Javascript)

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.

Upvotes: 0

Views: 52

Answers (2)

Mahesh Odedra
Mahesh Odedra

Reputation: 59

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>

Upvotes: 2

L. Vadim
L. Vadim

Reputation: 549

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>

Upvotes: 1

Related Questions