I'm encountering a bit of a challenge with this task... My javascript skills are a bit rusty, and I can't seem to pinpoint what's going wrong.
My goal is to have a navbar that disappears when a user clicks on a small arrow, revealing a second arrow. When the user clicks on the second arrow, the navbar should reappear. The entire navbar is contained within one tag. Since the menu is quite long, I want to give users the option to toggle it on and off.
The javascript function in the head section looks like this:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><a href="javascript:void(0)" onclick="collapseMenu('navbar2');"><img src="arrow.gif"></a></td>';
}</script>
The text on the page is as follows:
<div id='navbar'>
<td>
<a href="javascript:void(0)" onclick="collapseMenu('navbar');"><img src="arrow.gif"></a>
</td>
</div>
When I place the id in the div tag, the arrow displays upon clicking the link, but it doesn't remove the old html between the div tags. Using span instead of div or changing between single and double quotes didn't make a difference. If I move the id="navbar" to the td tag, the nav bar disappears but leaves the background color unchanged in the space left by the old td tag. Ideally, I'd like the area to go blank except for the tiny arrow. So my first question is why aren't the div and span tags working properly, or why does placing the id in the td tag affect the background color?
My second question involves how to specify innerHTML in text through a variable. It would be helpful not to have everything inside a function in the header.
Any ideas you have would be greatly appreciated!