Alright, so I found a tutorial on how to use lists to make a "TreeList" type thing, basically a list, ordered or unordered, that has a nested list that is collapsible.
However, it doesn't seem to be working for me.
Here's some code that I'm sure you will figure out.
JavaScript:
window.onload = function()
{
addEvents();
}
function addEvents()
{
activateTree(document.getElementById("navigation"));
}
function activateTree(oList)
{
for(var i = 0; i < oList.getElementsByTagName("ul").length; i++)
{
oList.getElementsByTagName("ul")[i].style.display="none";
}
oList.addEventListener("click", toggleBranch, false);
}
function toggleBranch(event)
{
var oBranch, cSubBranches;
oBranch = event.target,
cSubBranches = oBranch.getElementsByTagName("ul");
if(cSubBranches.length > 0)
{
if(cSubBranches[0].style.display == "block")
{
cSubBranches[0].style.display = "none";
}
else
{
cSubBranches[0].style.display = "block";
}
}
}
HTML:
<nav>
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#projects">Projects</a></li>
<ul class="projectsList">
<li><a href="#echo">Echo</a></li>
</ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
Try opening dev tools in the browser, there's a null somewhere.
Really wish the Editor Toolbar would show on Mobile Devices.