I have found a lot of answers on this, but most of the answers include jquery and dont fully answer my question. I have a DIV with several elements nested within it, and those nested element expand upwards, but the DIV does not. This is what i have:

HTML:

<style>
    .botnav {
      display:flex;
      align-items:flex-end;
      height: 0;
      width: 100%;
      position: fixed;
      z-index: 2;
      top: 50%;
      left: 0;
      overflow-y:hidden;
      background-color: #111;
      transition: height 0.5s;
    

    }
    
    .botnav .closebtn{
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      color: whitesmoke;
    }
</style>
 <div id='botNav' class='botnav'>
    <a href='javascript:void(0)' class='closebtN' onclick='closeBotNav()'>&times;</a>
    </div>
    <h1 style='position:fixed;cursor:pointer;font-size:25px;color:ghostwhite;background-color:#111;width:25px;height:25px;top:95%;left:95%;' id='s2' onclick="openBotNav()">&#94;</h1>

Javascript:

function openBotNav() {
    document.getElementById('botNav').style.height = '300px';
}

  function closeBotNav() {
    document.getElementById("botNav").style.height = "0";
  }

and as you can see the div will expand down, not up. this is my issue.

CodePudding user response：

Remove top:50% and replace it to bottom:0% on "botnav" class. This will do the trick

CodePudding user response：

Instead of changing styles with js, you could toggle a class that change the styles.

document.querySelector(".btn").addEventListener("click", () => {
  document.querySelector(".botnav").classList.toggle("open")
})

.botnav{
  background-color:orange;
  height:0px;
  overflow-y:hidden;
  transition-duration:1000ms;
}
.botnav.open{
  height:100px;
}

<button >open/close</button>
<div >
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Note that if you need 2 different element to open or close your div, you can make one event to open it with .classList.add("open") and an other with .classList.remove("open")