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

I changed the code, check out. thanks

L. Vadim
– L. Vadim

2017-01-14 14:15:41 +00:00
Commented Jan 14, 2017 at 14:15 — L. Vadim
– L. Vadim, Commented Jan 14, 2017 at 14:15

Mahesh Odedra · Accepted Answer · 2017-01-14 15:54:41Z

2

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>

answered Jan 14, 2017 at 15:54

Mahesh Odedra

591 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

L. Vadim · Accepted Answer · 2017-01-14 14:40:27Z

1

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>

edited Jan 14, 2017 at 14:40

answered Jan 14, 2017 at 14:12

L. Vadim

5473 silver badges12 bronze badges

3 Comments

Musa Over a year ago

Great. This works perfect. However, is it possible to implement fade in when clicking on the button?

L. Vadim Over a year ago

I added to the answer, please checkout :)

Musa Over a year ago

Works perfect. Thanks for your time!

Collectives™ on Stack Overflow

Replace div (jQuery + Javascript)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related