Hi there.

Ive a menu that shows content in a div after the user clicks on the corresponding link but the div actually showing up doesnt dissapear when the user clicks another link.

How do i do to make the displayed div to hide when the user clicks another link?

Here is the HTML code :

Code:
<script type="text/javascript" src="altera_display.js"></script>
        
</head>
<body>
         <nav>
         <ul>
                 <li><a href="#" onclick="javascript: altera_display('Div01');">Sobre</a></li>
                 <li><a href="#" onclick="javascript: altera_display('Div02');">Top5</a></li>
                 <li><a href="Historia.html">Historia dos Caminhos de ferro</a></li>
                 <li><a href="#">Pelo Mundo</a>
                         <ul>
                                
                                 <li><a href="#">Europa</a> </li>
                                 <li><a href="#">Asia</a> </li>
                                 <li><a href="#">Oceania</a> </li>
                                 <li><a href="#">Africa</a> </li>
                                 <li><a href="#">America do Norte</a> </li>
                                 <li><a href="#">America do Sul</a> </li>
                         </ul>
                 </li>
                 <li><a href="Factos.html">Factos</a> </li>
         </ul>
         </nav>
        
        
         <div id="Div01" style="display: none">Content Div</div>
         <div id="Div02" style="display: none">Content Div</div>
</body>
</html>
And here is the Javascript code:

Code:
function altera_display(id) {
if(document.getElementById(id).style.display=="none") {
         document.getElementById(id).style.display ="block";
}
else
         document.getElementById(id).style.display ="none";

}