JSFiddle - React, Tailwind, and code Playground

by slawe

JavaScript

function slideElementIn(myid) {
      mydiv=    document.getElementById(myid);
      if(mydiv.style.display!="none")return;

        // clientHeight is zero when display is none. So, prepare:
      inipos = mydiv.style.position;
      inivisibility = mydiv.style.visibility;
      iniz = mydiv.style.zIndex;
      initop = mydiv.style.top;
      inileft = mydiv.style.left;
      inioverflow = mydiv.style.overflow;
      mydiv.style.zIndex = "-999";
      mydiv.style.top = "0";
      mydiv.style.left = "0";
      mydiv.style.visibility = "hidden";
      mydiv.style.position = "fixed";
      mydiv.style.display = "block";
      finHeight = mydiv.clientHeight; // got it!
      // repair damage:
      mydiv.style.display = "none";
      mydiv.style.position = inipos;
      mydiv.style.visibility =     inivisibility;
      mydiv.style.zIndex = iniz;
      mydiv.style.top = initop;
      mydiv.style.left = inileft;

      iniHeight = mydiv.style.height;
      mydiv.style.height = 0;
      mydiv.style.display = "block";
      mydiv.style.overflow="hidden";

      var i = 1;                     //  set your counter to 1
      function myLoop2 (i,mydiv,finHeight,iniHeight,inioverflow) {           //  create a loop function
         setTimeout(function () {    //  call a 3s setTimeout when the loop is called
            mydiv.style.height = finHeight * easeIn(i * (1./fadeDuration));
            i++;                     //  increment the counter
            if (i < fadeDuration) {            //  if the counter < 10, call the loop function
               myLoop2(i,mydiv,finHeight,iniHeight,inioverflow);             //  ..  again which will trigger another
            }  else {
                mydiv.style.height = iniHeight;
                mydiv.style.overflow=inioverflow;
            }                       //  ..  setTimeout()
         }, 1)
      }

      myLoop2(i,mydiv,finHeight,iniHeight,inioverflow);


     }

    function slideElementOut(myid) {
      mydiv=   ...