Replace Div Content onclick

Question

I know nothing about jQuery but want to achieve something really important.

I want to have a button/link that will replace the div content and if I press that button again so it will put the original content back in position.

I don't know javascript that's why I didn't code. I found one stackoverflow problem near to my need. http://stackoverflow.com/questions/14685224/replace-content-of-div-with-content-of-another-div-jquery — Junaid Khawaja, Sep 09 '14 at 01:44
I put this in JS fiddle and change some code, it's working but I don't know how to put the original content back if I click the link again. — Junaid Khawaja, Sep 09 '14 at 01:46
Here's my fiddle link http://jsfiddle.net/junaidkhawaja/vmu0gtoL/ — Junaid Khawaja, Sep 09 '14 at 01:54

BernardoLima · Accepted Answer · 2014-09-09T02:54:45.183

13

Here's an 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

edited Sep 09 '14 at 02:54

answered Sep 09 '14 at 01:53

BernardoLima

1,103
2
16
35

Thanks. Your fiddle is near to my help. You put 'here is my dynamic content' in JS but I need a HTML div that will show and replace on click.. can you help me out to tweak your fiddle... – Junaid Khawaja Sep 09 '14 at 01:59
yeah, that one is perfect.. I saw you set onload for that, how I will be inserting that code in my Wordpress website. Another silly question.. I don't know how to make 4 codes like this.. can you do that in that fiddle.. Help will be appreciated .. – Junaid Khawaja Sep 09 '14 at 02:09
@JunaidKhawaja, you got try to understand it, I won't do it for you, but I'll explain to you the code, if you want. – BernardoLima Sep 09 '14 at 02:20
You're right. I put the code thrice and changed the IDs but it got some errors.. Let me do it myself... Thanks for your help ! – Junaid Khawaja Sep 09 '14 at 02:23
I'm gonna add some help for you in my answer, just a minute. – BernardoLima Sep 09 '14 at 02:24
It will be appreciable! – Junaid Khawaja Sep 09 '14 at 02:29
2

http://jsfiddle.net/ha6qp7w4/4/ here's the code commented, I've tried to make it clear, if you have any questions tell me, note that you can use events on any elements, like, if you replace btnClick with a div ID, it will work aswell, when it detects a click on the div. – BernardoLima Sep 09 '14 at 02:51
1

Thank you master! I came up with solution with your help.. Here's what I needed. http://jsfiddle.net/junaidkhawaja/ha6qp7w4/5/ – Junaid Khawaja Sep 09 '14 at 02:56
1

@JunaidKhawaja, seems like you got it :DD – BernardoLima Sep 09 '14 at 03:00
Yeah, Just because of your help ! – Junaid Khawaja Sep 09 '14 at 03:04
Is there anyway that one div can be displayed by default? And then you can click the other div and that will display. At the minute, you have to click to see any content at all. – Chris Mar 29 '15 at 19:08

score 3 · Answer 2 · answered Sep 09 '14 at 01:57

A simple addClass and removeClass will do the trick on 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 you to learn jquery first before using.

cssyphus · Answer 3 · 2014-09-09T02:08:58.230

EDIT: This answer was submitted before the OP's jsFiddle example was posted in question. See second answer for response to that jsFiddle.

Here is an example of how it could work:

Working jsFiddle 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;
    }
});

score 1 · Answer 4 · answered Sep 09 '14 at 02:06

Working from your jsFiddle example:

The jsFiddle was fine, but you were missing semi-colons at the end of the event.preventDefault() statements.

This 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()); 
    });
});

no, I need something else that is defined in BernardoLima comments.. see comments over there.. I need more help but I think he is offline.. — Junaid Khawaja, Sep 09 '14 at 02:19

score 1 · Answer 5 · answered Sep 09 '14 at 02:33

A Third Answer

Sorry, maybe I have it correct this time...

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;
        }
    });
});

score 1 · Answer 6 · answered Oct 18 '16 at 08:41

Try This:

I think that 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.

score 0 · Answer 7 · answered Jun 22 '21 at 16:52

Here is a complete solution in order to achieve this -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

Replace Div Content onclick

7 Answers7

Linked