Replace Div Content onclick

Question

I don't know anything about jQuery, but I want to achieve something really important.

I want to have a button / link that will replace the contents of the div, and if I press this button again to return the original content to the desired position.

Answer 1

Here's the approach:

HTML:

<div id="1"> My Content 1 </div> <div id="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> 

JQuery

 $('#btnClick').on('click',function(){ if($('#1').css('display')!='none'){ $('#2').html('Here is my dynamic content').show().siblings('div').hide(); }else if($('#2').css('display')!='none'){ $('#1').show().siblings('div').hide(); } }); 

JsFiddle:
http://jsfiddle.net/ha6qp7w4/
http://jsfiddle.net/ha6qp7w4/4 <--- Commented

Answer 2

A simple addClass and removeClass will do the trick for what you need.

 $('#change').on('click', function() { $('div').each(function() { if($(this).hasClass('active')) { $(this).removeClass('active'); } else { $(this).addClass('active'); } }); 

});

Seee fiddle

I recommend that you first learn jquery before using.

Answer 3

EDIT: This answer was submitted before the OP jsFiddle example was presented. See the second answer for an answer to this jsFiddle.

---

Here is an example of how it could work:

JsFiddle working demo

HTML:

 <div id="someDiv"> Once upon a midnight dreary <br>While I pondered weak and weary <br>Over many a quaint and curious <br>Volume of forgotten lore. </div> Type new text here:<br> <input type="text" id="replacementtext" /> <input type="button" id="mybutt" value="Swap" /> <input type="hidden" id="vault" /> 

JavaScript / jQuery:

 //Declare persistent vars outside function var savText, newText, myState = 0; $('#mybutt').click(function(){ if (myState==0){ savText = $('#someDiv').html(); //save poem data from DIV newText = $('#replacementtext').val(); //save data from input field $('#replacementtext').val(''); //clear input field $('#someDiv').html( newText ); //replace poem with insert field data myState = 1; //remember swap has been done once } else { $('#someDiv').html(savText); $('#replacementtext').val(newText); //replace contents myState = 0; } }); 

Answer 4

Work with your jsFiddle example:

jsFiddle was fine, but at the end of events, event.preventDefault () was missing half columns.

It works: Revised jsFiddle

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault(); jQuery('#rec-box').html(jQuery(this).next().html()); }); jQuery(".rec2").click(function(event) { event.preventDefault(); jQuery('#rec-box2').html(jQuery(this).next().html()); }); }); 

Answer 5

Third answer

Sorry, maybe this time I did it right ...

jsFiddle Demo

 var savedBox1, savedBox2, state1=0, state2=0; jQuery(document).ready(function() { jQuery(".rec1").click(function() { if (state1==0){ savedBox1 = jQuery('#rec-box').html(); jQuery('#rec-box').html(jQuery(this).next().html()); state1 = 1; }else{ jQuery('#rec-box').html(savedBox1); state1 = 0; } }); jQuery(".rec2").click(function() { if (state1==0){ savedBox2 = jQuery('#rec-box2').html(); jQuery('#rec-box2').html(jQuery(this).next().html()); state2 = 1; }else{ jQuery('#rec-box2').html(savedBox2); state2 = 0; } }); }); 

Answer 6

Try the following:

I think you want something like this.

HTML:

 <div id="1"> My Content 1 </div> <div id="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> 

JQuery

 $('#btnClick').on('click',function(){ if($('#1').css('display')!='none'){ $('#2').show().siblings('div').hide(); }else if($('#2').css('display')!='none'){ $('#1').show().siblings('div').hide(); } }); 

JsFiddle:
http://jsfiddle.net/ha6qp7w4/1113/ <--- see this, I hope you want something like this.