Despite trying different methods such as Internal CSS, inline CSS, and JavaScript, I cannot get the transition effect "transition: height 1s ease-out;" to work. Currently, I am using the latest version of Chrome for testing purposes. It did work when I utilized separate functions 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>
Here is the relevant CSS code:
.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;
}
Check out the corresponding HTML code below:
<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>