How to create a vertical slide bar in html through transitional effects using JavaScript?

Question

Consider my following code:

<table>
  <tr>
    <td onclick="shownav()">Equations of Circle
      <div id="myDownnav" class="sidenav">
        <a>General Info</a>
        <a>In Polar Coordinates</a>
        <a>From two end-points of the diameter</a>
        <a>Passing through three points</a>
      </div>
    </td>
  </tr>
</table>

I want the four links under div of id myDownnav to be shown upon clicking the td element Equations of Circle. Here, I have the following CSS-styles:

.sidenav{
  height: 0; /*Changes with JavaScript*/
  width: 100%; 
  position: relative; 
  z-index: 10;
  top: 0; 
  left: 0;
  background-color: rgba(0,0,0,0.6);
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav down*/
}

/* The navigation menu links */
.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-size: inherit;
  color: lightsteelblue;
  display: block;
  transition: 0.3s;
  background-color: rgba(0,0,0,0.5);
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: lightsteelblue;
  background-color: rgba(0,0,0);
}

Finally, my JavaScript function shownav():

function shownav(){
  var z=document.getElementById('myDownnav').style;
    document.getElementById("myDownnav").style.height =z.height==0? '100%': 0;
}

What are the things that I need to change? I face the following problems:

1. All the four links are previously shown, even before I click on the td
2. After clicking the td, only the background changes.
3. I can never make the links to disappear even after a number of clicks though I have made the div to be of height 0.
   N.B. I already know that using onclick or other inline functions is much discouraged. Any other suggestions would be accepted.

Answer 1

.sidenav{
  max-height: 0; /* Changes with JavaScript */
  width: 100%; 
  overflow: hidden;
  background-color: rgba(0,0,0,0.6);
  transition: max-height 0.5s ease; /* 0.5 second transition effect to slide in the sidenav down*/
}

.sidenav.show {
    max-height: 500px;
}

function shownav(){
    let nav = document.querySelector('.sidenav');
    nav.classList.toggle('show');
}

If you wanna add a transition for height, you should use max-height and overflow instead. It's a reference to this answer. I would suggest you use JS to toggle between classes instead of mixing CSS in your JS code as it makes development and debugging easier. Explanation is here.