Take a look at my code snippet:
<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'm trying to display the four links within the div with an ID of myDownnav when clicking on the td element containing the text Equations of Circle. These are the CSS styles I have applied:
.sidenav{
height: 0; /*This value will be updated by JavaScript*/
width: 100%;
position: relative;
z-index: 10;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
transition: 0.5s; /*Adds a 0.5s transition effect to slide down the sidenav*/
}
/* Styling for 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);
}
/* Change the color when hovering over navigation links */
.sidenav a:hover {
color: lightsteelblue;
background-color: rgba(0,0,0);
}
And here's my JavaScript function named shownav():
function shownav(){
var z=document.getElementById('myDownnav').style;
document.getElementById("myDownnav").style.height =z.height==0? '100%': 0;
}
What adjustments do I need to make? Currently, I'm encountering the following issues:
- All four links appear visible even before clicking on the
tdelement. - Upon clicking the
td, only the background changes without revealing the links. - The links remain visible and do not disappear despite setting the
divheight to 0 after multiple clicks.
P.S. I am aware that using inline functions likeonclickis discouraged. Any alternative suggestions are welcome.