JSFiddle - React, Tailwind, and code Playground

by chiefGui

HTML

<div id="icon"></div>
<div id="obj"></div>
<div id="menu"></div>
<div id="menu2"></div>

<button id="button">Hello!</button>

CSS

#obj {
    background: blue;
    width: 360px;
    height: 222px;
}
#icon {
    background: red;
    width: 360px;
    height: 10px;
    
}
#menu {
    background: green;
    width: 360px;
    height: 30px;
}
#menu2 {
    background: black;
    width: 360px;
    height: 15px;
}

JavaScript

var button = document.getElementById('button');

button.addEventListener('click', onButtonClick, false);

zoom('obj', 'icon', 'menu');

function onButtonClick () {
    zoom('obj', 'icon', 'menu');
};

function zoom(obj, icon, menu) {
  var el = document.getElementById(obj);
  var ico = document.getElementById(icon);
  var men = document.getElementById(menu);
  var men2 = document.getElementById(menu + "2");
    
  if (el.style.width === "360px") {
    el.style.width = "500px";
    el.style.height = "308px";
    men.style.width = "500px";
    men2.style.width = "500px";
    if (el.style.width == "500px") {
       ico.style.background = "black";
    }
  } else {
    el.style.width = "360px";
    el.style.height = "222px";
    men.style.width = "360px";
    men2.style.width = "360px";
    if (el.style.width == "360px") {
      ico.style.background = "red";
    }
  }
}