CODEWITHSUNDEEP
javascripthtmlswap
Kevin
Kevin

Reputation: 21

Replace <div> When Directly Clicked

I'm looking for some JS code that will replace a div with another when clicked. No outside links or buttons, just simply swapping the div to a new one when clicked anywhere within the original div. I'd also like to make it so that once clicked and swapped clicking it a second time will not swap it back.

Example: I have a box div for a livestream with content in it (schedule information and the like), clicking anywhere on that div will replace it with the actual livestream embed.

Would this even be possible?

Upvotes: 2

Views: 158

Answers (4)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

You might want to take a look at the pure CSS demo if you want to keep your code clean:

Checkboxy:
　　http://jsfiddle.net/LaHS4/1/

If you dont like checkbox, then try this demo:
　　http://jsfiddle.net/E7zVt/1/

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816462

Don't understand why everyone is giving jQuery solutions. Here is a pure JavaScript one:

var livestream = document.getElementByID('livestream');

document.getElementById('schedule').onclick = function() {
    this.parentNode.replaceChild(livestream, this);
};

Here I assumed to that the replacement is part of DOM. Of course you can also dynamically generate it with document.createElement [MDN].

I don't know what you want to do with the replaced element. It is returned by the replaceChild method, so you can insert it wherever you want.

Reference: .replaceChild() [MDN]

Upvotes: 3

Unknown artist
Unknown artist

Reputation: 947

<div id= "wrapper">
    <div id= "schedule">
        Skedule shedule
    </div>

    <div id= "livestreamWrapper" style= "display: none;">
    </div>
</div>

<script type= "text/javascript">
$("#schedule").click(function()
{
    $(this).hide();
    $("#livestreamWrapper").show()
                           .append(/*actual livestream here*/);
});
</script>

I'd recommend having both #schedule and #livestreamWrapper wrapped in a div (#wrapper in my example), less headache with positioning.

Some precautions may be used for visitors with javascript disabled (like originally making both divs visible, actual livestream appended, and hiding #livestreamWrapper and removing the actual livestream on document.ready), but are there any people watching livestreams and not having javascript enabled? :)

Upvotes: 0

genesis
genesis

Reputation: 50976

$("#div").click(function(){
   $(this).html('what to write into that div?');
});

Upvotes: 0

Related Questions