I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file.
However, whenever I attempt to use both href and onclick, the functionality fails to work as intended.
The only workaround I've found is to change the href attribute to "#", but this then prevents the page from being accessed by other pages.
It's worth noting that altering the return value of the function doesn't seem to make a difference in this case.
Any help or suggestions would be greatly appreciated!
Below is the snippet of HTML code I am working with:
<script>
function show(shown, hidden, hidden2) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
document.getElementById(hidden2).style.display='none';
return true;
}
</script>
<ul>
<li><a href="../info/index.html" onclick="return show('Page1','Page2','ṕage3');">Objective</a></li>
<li><a href="../info/index.html" onclick="return show('Page2','Page1','ṕage3');">Board of Directors</a></li>
<li><a href="../info/index.html" onclick="return show('Page3','Page1','ṕage2');">Membership</a></li>
</ul>
<div id="Page1" style="display:none">
<a href="#" onclick="return show('Page2','Page1','ṕage3');">Board of Directors</a></br>
<a href="#" onclick="return show('Page3','Page1','ṕage2');">Membership</a> </br>
<p>
text
</p>
</div></br>
<div id="Page2" style="display:none">
<a href="#" onclick="return show('Page1','Page2','ṕage3');">Objective</a> </br>
<a href="#" onclick="return show('Page3','Page1','ṕage2');">Membership</a></br>
<p>
text
</div></br>
<div id="Page3" style="display:none">
<a href="#" onclick="return show('Page1','Page2','ṕage3');">Objective</a> </br>
<a href="#" onclick="return show('Page2','Page1','ṕage3');">Board of Directors</a></br>
<p>
text
</p>
</div></br>
Thank you for any assistance you can provide.