CODEWITHSUNDEEP
jqueryhtmlcss
Junaid Khawaja
Junaid Khawaja

Reputation: 194

Replace Div Content onclick

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.

Upvotes: 8

Views: 116658

Answers (7)

Amit Pathak
Amit Pathak

Reputation: 1367

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>

enter image description here

Upvotes: 0

user7035449
user7035449

Reputation: 11

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.

Upvotes: 1

BernardoLima
BernardoLima

Reputation: 1141

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

Upvotes: 13

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 1

HTTP
HTTP

Reputation: 1724

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.

Upvotes: 3

Related Questions