Jquery CSS show current div on click in another cotainer

Question

I have this html.

    <div class="row">
        <div class="col-lg-6" style="float:left">
        <div class="col-lg-3">
        <div id='rm-a'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
            </div></div></div>
        
            <div id='rm-b'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style="background-image:url(<?php echo 'http://iaz.example.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
            </div></div></div>
                                
            <div id='rm-c'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style="background-image:url(<?php echo 'http://iaz.example.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
            </div></div></div>                            
       
    
         </div>
        <div class="col-lg-6"></div>  //container
        </div>

What I am looking to achieve is: div class rm-a , rm-b and rm-c act as a thumbnail anchor to bigger image container. so when div rm-a is clicked,

the same div will be copied in the container <div class="col-lg-6"></div>

when rm-b is clicked it will replace the by rm-b in the container.

I had a go at it, also found one example at https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

but that deals with images and src, whereas in my example it is all divs with background images, somehow not able to adept the same correctly.

my code link at JSfiddle is - https://jsfiddle.net/yoc9qvrb/12/

Answer 1

You can use clone() to copy the content of div and using html() you can update the content in the target div.

$('#rm-a,#rm-b,#rm-c').click(function(){
  var target = $(this).parent().next();
  target.html('');
  var copiedDiv = $(this).clone();
  target.html(copiedDiv);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
        <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
    <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
        <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>