JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="statik box">
<img src="http://www.cyberforum.ru/images/map.jpg" alt="Карта" /> 
</div>
 
<div class="interactiv box hide">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=eaMAhvgOGcgJAoPENDgL49fOUyuKH3e4&width=500&height=400&lang=ru_RU&sourceType=constructor&scroll=true"></script> -->
   <div class="container-fluid">   
        <div class="row">
            <div class="col-md-12 footer"> 
            
</div>

CSS

.box{
  width:200px;
  height:200px;
}
.statik{
   background: blue;
   cursor:pointer;
}
.interactiv{
  background:green;
  }
 .hide{
    display:none;
  }

JavaScript

$('.statik').click(function(){
                    $(this).addClass("hide");
          $(".interactiv").removeClass("hide")
});
$('.interactiv').click(function(){
                    $(this).addClass("hide");
          $(".statik").removeClass("hide")
});