Switch Content of Div onclick

I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).

It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.

I tried it with innerhtml, but it doesnt work:

<div id="container1">
<img src="blablabla">
</div>

<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>

Answers


mm... your code works fine, just close img tags and remove semicolon:

<div id="container1">
    <img src="blablabla" />
</div>

<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>

here you have a demo: http://jsfiddle.net/HLs86/


HTML

<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li><a href="" class="buy_now">Subscribe Now</a></li>
</ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the  "Yearly Plans"</a></ul>
  </div>
  <div class="pricing_table" id="yearly">
  <ul>
 <li>Basic</li>
 <li><a href="" class="buy_now">Subscribe Now</a></li>
 </ul>
 <ul style="background-color:#CCCCCC;">
 <h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the       "Monthly Plans"</a></ul>
</div>

JS

var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});

you just need to add javascript: on your onclick action like this

<div id="container1"></div>

<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>

there is example


Need Your Help

Create a function in WordPress to change a users role when they click a link

php wordpress user-roles

So I have been researching for a while but to no avail. I am very new to php and back end WordPress functions.

Jasmine Headless Webkit spec file running before assets?

ruby-on-rails jasmine

To run the spec files &amp; assets as coffee script, I decided to go with jasmine-headless-webkit. I believe I have everything installed correctly, but perhaps something wrong in my jasmine.yml fil...