Expand / Collapsible Javascript Menu
An expandable or collapsible menu is one which shrinks a long list while the page loads. When the user clicks on the menu it displays the full list. We can have anything in expandable collapsible menus say a list of blog posts, favorite software or a list of visited places etc. JavaScript is used here for creating an expandable collapsible menu.
Javascripts are more useful and does better things than the standard html. But when excessive JavaScripts are used it slows down or sometimes even disables the pages from loading properly.
In order to display an e/c menu first we have to add the following code between the head section of the page.
<head>….<code 01 here></head>
Here is the code,
function changeMyDisplay(title){
var listName = title.id.substring(0, title.id.indexOf("Title")) + "List";
var currList = document.getElementById(listName);
var currTitle = document.getElementById(title.id);
if(currList.style.display == "block"){
currList.style.display = "none";
currTitle.innerHTML = currTitle.innerHTML.substring(0,1) + "+" + currTitle.innerHTML.substring(2);
}
else{
currTitle.innerHTML = currTitle.innerHTML.substring(0,1) + "-" + currTitle.innerHTML.substring(2);
currList.style.display = "block";
}
}
function selectedBlog(selection){
location.href = selection.value;
}
</script>
Now we have to place another code which will show expand / collapse menu exactly in the page.
<h2 id="softLinksTitle" onclick="changeMyDisplay(this)" class="sidebar-title sidebar-clickable">|+| Links</h2>
<div id="softLinksList" style="display:none">
<ul>
<li><a href="http://www.yahoo.com/">yahoo</a></li>
<li><a href="http://www.google.com/">google</a></li>
</ul>
</div>
</div>
JavaScript based menus created using the above code can be found at Jim Halberg’s blog and also at Kate’s blog.