Transition not working for height

Question

Tried writing "transition: height 1s ease-out;" in Internal CSS, inline CSS, javascript but nothing works. I am using Chrome(latest as of now). It works when I had different funtions like onmouseover to open the shutter and onmouseclick to close it.

<script>

    function departmentShutter(){
        if(document.getElementById("departmentShutter").clientHeight === 100 ){
            document.getElementById("departmentShutter").style.height = "inherit";
        }
        else{
            document.getElementById("departmentShutter").style.height = "100px";
        }
    }

    function studentShutter(){
        if(document.getElementById("studentShutter").clientHeight === 100 ){
            document.getElementById("studentShutter").style.height = "inherit";
        }
        else{
            document.getElementById("studentShutter").style.height = "100px";
        }
    }

</script>

The CSS is as follows: Just focus on transition to work.

.dashboard{
    width: 100%;
    height: fit-content;
    position: fixed;
}
.dashboardContent{
    height: -webkit-fill-available;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow-x: auto;
}
.department{
    height: 100%;
    width: 50%;
    left: 0px;
    display: inline-block;
    float: left;
    z-index: 0;
    position: fixed;
    margin-top: 100px;
}
.student{
    height: 100%;
    width: 50%;
    right: 0px;
    display: inline-block;
    float: left;
    z-index: 0;
    position: fixed;
    margin-top: 100px;
}
.departmentShutter{
    height: inherit;
    transition: height 1s ease-out;
    width: 50%;
    left: 0px;
    display: inline-block;
    background-color: #09d;
    float: left;
    z-index: 99;
    position: fixed;
}
.studentShutter{
    height: inherit;
    transition: height 1s ease-out;
    width: 50%;
    right: 0px;
    display: inline-block;
    background-color: #2d0;
    float: left;
    z-index: 99;
    position: fixed;
}
.departmentShutter span,.studentShutter span{
    font-size: 5em;
}
.rectangle{
    height: 200px;
    width: 200px;
    background-color: #78015d;
}    

HTML:

<div class="dashboard">
    <div class="dashboardContent">

        <div id="departmentShutter" class="departmentShutter cursorPointer disable-selection" onclick="departmentShutter()">
            <span class="center">Department</span>
        </div>
        <div class="department">
            <table>
                <tr>    
                    <td><div class="rectangle"></div></td>
                </tr>
            </table>
        </div>

        <div id="studentShutter" class="studentShutter cursorPointer disable-selection" onclick="studentShutter()">
           <span class="center">Student</span>
        </div>
        <div class="student">
            <table>
                <tr>    
                    <td><div class="rectangle"></div></td>
                </tr>
            </table>
        </div>

    </div>  
</div>

Answer 1

Transitions only work on values that can be converted to numbers and values that have been explicitly set on an element up front, so that the CSS rendering engine can determine the progression from the start value to the end value. inherit is not a value that is numeric, so the transition doesn't work.

Change height:inherit to height:100% in the .departmentShutter and .studentShutter classes as well as in the JavaScript.

Also, there is no need for two separate functions for the sizing of the two separate div elements since the two functions do exactly the same thing, just on different elements. The two functions can be combined into one and to determine which element needs to be sized, you need only use the this keyword, which will be bound to whichever div initiated the event in the first place.

Lastly, don't use inline HTML event attributes (onclick, etc.) to bind your event handlers. That is how it was done 20 years ago, but unfortunately it just keeps getting copied and pasted today, so new users don't know any better. There are many reasons not to use this technique anymore. Instead, separate your JavaScript completely from your HTML and follow modern standards for event binding.

// Get your DOM refernces just once to avoid excessive DOM scans
// Find both div elements that should be clickable and place them both in an array
var shutters = Array.from(document.querySelectorAll(".departmentShutter, .studentShutter"));

// Loop through the array...
shutters.forEach(function(shutter){
  // Assign a click event handler to each
  shutter.addEventListener("click", function(evt){
  
    // Loop through array and reset heights of both shutters
    shutters.forEach(function(shutter){ 
      shutter.style.height= "100%";
    });
    
    if (this.clientHeight === 100) {
      this.style.height = "100%";
    }
    else {
      this.style.height = "100px";
    }
  });
});

.dashboard {
  width: 100%;
  height: fit-content;
  position: fixed;
}

.dashboardContent {
  height: -webkit-fill-available;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  overflow-x: auto;
}

.department {
  height: 100%;
  width: 50%;
  left: 0px;
  display: inline-block;
  float: left;
  z-index: 0;
  position: fixed;
  margin-top: 100px;
}

.student {
  height: 100%;
  width: 50%;
  right: 0px;
  display: inline-block;
  float: left;
  z-index: 0;
  position: fixed;
  margin-top: 100px;
}

.departmentShutter {
  height: 100%;
  transition: height 1s ease-out;
  width: 50%;
  left: 0px;
  display: inline-block;
  background-color: #09d;
  float: left;
  z-index: 99;
  position: fixed;
}

.studentShutter {
  height: 100%;
  transition: height 1s ease-out;
  width: 50%;
  right: 0px;
  display: inline-block;
  background-color: #2d0;
  float: left;
  z-index: 99;
  position: fixed;
}

.departmentShutter span, .studentShutter span {
  font-size: 5em;
}

.rectangle {
  height: 200px;
  width: 200px;
  background-color: #78015d;
}

<div class="dashboard">
  <div class="dashboardContent">

    <div id="departmentShutter" class="departmentShutter cursorPointer disable-selection percentHeight">
      <span class="center">Department</span>
    </div>
    <div class="department">
      <table>
        <tr>
          <td><div class="rectangle"></div></td>
        </tr>
      </table>
    </div>

    <div id="studentShutter" class="studentShutter cursorPointer disable-selection percentHeight">
      <span class="center">Student</span>
    </div>
    <div class="student">
      <table>
        <tr>
          <td><div class="rectangle"></div></td>
        </tr>
      </table>
    </div>

  </div>
</div>