Q: Why this invert conditional animation does not work? This piece of code is supposed to expand the #bottombar when #topbar is clicked and hide it while the #bottombar height is 200px, but acts strangely. Why is that?
<!DOCTYPE html>
<html>
    <style>
    #wire {
        display: block;
    }
    #topbar {
        background-color: rgba(240,240,240,1);
        cursor: pointer;
    }
    #bottombar {
        height: 0px;
        overflow: hidden;
        background-color: rgba(210,210,210,1);
    }
    </style>
    <body>
        <div id = "wire">
            <div id = "topbar" onClick = "expand()">Stuff</div>
            <div id = "bottombar">Other stuff</div>
        </div>
    </body>
    <script>
    function expand() {
        var timing = {
            duration: 400,
            fill: "forwards",
            easing: "ease-out"
        }
        var bottombar = document.getElementById('bottombar')
        if (bottombar.style.height == 0) {
            bottombar.animate([{height: "0px"},{height: "200px"}], timing);
        } else if (bottombar.style.height !== 0) {
            bottombar.animate([{height: "200px"},{height: "0px"}], timing);
        }
    }
    </script>
</html>


A: I think I see your problem here. There's a distinction between element.style and its current style. This answer addresses that distinction a bit.
Here is the Mozilla Developer's Network Article on getComputedStyle
Here is your code looking at the current style, which I am pretty sure is what you want.


function expand() {
  var timing = {
   duration: 400,
   fill: "forwards",
   easing: "ease-out"
  }
  var bottombar = document.getElementById('bottombar')
  var bottombarComputedStyles = window.getComputedStyle(bottombar);
  var bottombarHeight = bottombarComputedStyles.getPropertyValue('height');

  if (bottombarHeight == "0px" || bottombarHeight == "0") {
   console.log(`height is 0 or 0px`);
   bottombar.animate([{height: "0"},{height: "200px"}], timing);
  } else {
   console.log(`height is neither 0 nor 0px. It is ${bottombarHeight}`);
   bottombar.animate([{height: "200px"},{height: "0"}], timing);
  }
 }
  #wire {
   display: block;
  }
  #topbar {
   background-color: rgba(240,240,240,1);
   cursor: pointer;
  }
  #bottombar {
   height: 0px;
   overflow: hidden;
   background-color: rgba(210,210,210,1);
  }
<div id = "wire">
 <div id = "topbar" onClick = "expand()">Stuff</div>
 <div id = "bottombar">Other stuff</div>
</div>


