JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="nav" style="margin:5px;padding:15px;border:1px solid gray">

</div>

<div id="box-container" class="container _a">

</div>




<style id="myStyle"></style>

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: 13px;
}




.container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 100%); */
  grid-auto-columns: max-content;


  border: 5px solid green;
  width: 500px;
  max-width: 600px;
  background: #d5eddc;


}

.box {
  width: 0px;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: width 1.5s;

}








b {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

b:hover {
  background: #cdcdcd;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

div {

  background: #fff;
  margin: 0 auto;
  text-align: center;

}

JavaScript

var boxContainer = document.getElementById('box-container');
var navEl = document.getElementById('nav');
var myStyle = document.getElementById("myStyle")
var boxCount = 0;

function updateStyles(styleEl) {
  var styleStr = ""

  for (var i = 1; i <= boxCount; i++) {
    styleStr += `
  .container._a${i} div._a${i} {
  background: yellow;
  width:500px;
  transition: width background 1.5s;
}

   `
  }
  styleEl.innerHTML = styleStr
  styleEl.innerHTML = styleStr
}

function addBox(containerEl, navEl) {
  boxCount++
  var boxEl = document.createElement("div")
  var boxIdent = "_a" + boxCount;
  //.classList.add("A");
  boxEl.classList.add(boxIdent)
  boxEl.classList.add("box")
  boxEl.innerHTML = boxCount

  containerEl.appendChild(boxEl)
  var btn = document.createElement("b");

  btn.addEventListener('click', function() {
    console.log(boxIdent)
    changeActive(containerEl, boxIdent)
  })
  btn.innerHTML = boxCount
  navEl.appendChild(btn)
  updateStyles(myStyle)

}

function changeActive(el, _id) {

  el.classList.forEach((v) => {
    if (v[0] == "_") {
      el.classList.remove(v);
    }
  })
  el.classList.add(_id);

}
document.addEventListener("DOMContentLoaded", function(event) {
  addBox(boxContainer, navEl)
  addBox(boxContainer, navEl)
  addBox(boxContainer, navEl)
  addBox(boxContainer, navEl)
});