This tutorial will show you how to create a menu that can be opened and collapsed. First of all, you need to include a certain script that will do the entire thing.

// JScript source code

function showHide(objId) {
    var obj = document.getElementById(objId).style.display;

    if (obj == "inline") {
        hideObj(objId)
    }
    else {
        showObj(objId);
    }
}

function showObj(objId) {
    document.getElementById(objId).style.display = "inline";
}
function hideObj(objId) {
    document.getElementById(objId).style.display = "none";
}

Basically, it checks whether the object is collapsed or opened, and then does the oppsite; it collapses if it is open, and opens if it is collapsed. You might already now use the code above. By making a for example link (“a”), it will show and hide everytime you press it.

<a href="#" onClick="showHide('toShowOrHide');">Press to show or hide</a><br />
<div id="toShowOrHide" style="display:none">
It seems that it works!
</div>

We have a link that executes a command showHide with an argument toShowOrHide, which is, as you might see, the ID of the div. By entering the link, you will either open or collapse the div object. Remember, you might also use other tags/elements that are to be showed or hided. To see this code in work, go to http://editor.clizware.net/?id=8