Currently, I am facing an issue with a tr element inside a table. Whenever it is clicked, some additional html content is appended to it. I want to achieve a smooth transition effect for the appended tr by setting its height to 0 initially and then changing it to auto on click.
Although, no matter what I try, the div does not take a height of 0. Even when I include height: 0; in the CSS, it still maintains some height.
This is how my HTML looks like:
<tr class="info_container">
<td colspan="7">Pick a time
<button id="time_btn">Button</button>
<span class="tickets_left_cont"> 7 tickets left</span>
</td>
</tr>
Here's the relevant CSS:
.info_container {
background: #fff;
color: #000;
z-index: 999;
left: 0;
width: 100%;
padding: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 0;
text-align: left;
font-family: BreeSerifLt;
border-bottom: 3px solid #000;
}
#time_btn {
outline: 0;
padding: 10px;
background: #9A0FC7;
border: 0;
color: #fff;
display: block;
margin-top: 10px;
font-weight: 300;
font-family: BreeSerifLt;
}
I'm puzzled as to why the info_container class doesn't respond to setting its height to 0 to hide the div. Any insights or suggestions are much appreciated.
Thank you!