// TODO: expand/collapse (show/hide) an element, specified by id,
// triggered by an element, specified by triggerID. triggerTxt is a text in trigger element.
function toggle(id, triggerId, triggerTxt){
e = document.getElementById(id);
trigger = document.getElementById(triggerId);
if (e.style.display == 'block' || e.style.display != 'none'){
e.style.display = 'none'
// instead of [+] you can also replace with an image as well
// trigger.innerHTML = "<img src=images/arrow.gif  />  " + triggerTxt;
}
else
{
e.style.display = 'block'
// instead of [-] you can also replace with an image as well
// trigger.innerHTML = "<img src=images/arrowrev.gif  />  " + triggerTxt;
}
}

/*
<h3 id="trigger1" onclick="toggle('list1','trigger1','click here')">click here</h3>
<ul>

<!-- element (in div) to be expanded/collapsed -->
<div id="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
</ul>
<ul>
<!-- call this function now to collapse list1 element when the page is loaded -->
<script>toggle('list1','trigger1','click here')</script>
</ul>
*/