Create a menu that the user can choose to expand or collapse.
Code for this example:
<p>
<script type="text/javascript">// <![CDATA[
hide//
function expandCollapse() {
for (var i=0; i<expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
//End
// ]]></script>
Click each item to expand or collapse.</p>
<ul>
<li>
<div id="12a"><a href="javascript: expandCollapse('12a', '12b');">BOOKS</a></div>
<div style="display: none;" id="12b"><a href="javascript: expandCollapse('12a', '12b');">BOOKS</a><br />-- Two Week Checkout<br />-- Renewable</div>
</li>
<li>
<div id="13a"><a href="javascript: expandCollapse('13a', '13b');">JOURNALS</a></div>
<div style="display: none;" id="13b"><a href="javascript: expandCollapse('13a', '13b');">JOURNALS</a><br />-- Two Week Checkout<br />-- Renewable</div>
</li>
<li>
<div id="14a"><a href="javascript: expandCollapse('14a', '14b');">REFERENCE</a></div>
<div style="display: none;" id="14b"><a href="javascript: expandCollapse('14a', '14b');">REFERENCE</a><br />-- Library Use Only<br /> </div>
</li>
<li>
<div id="15a"><a href="javascript: expandCollapse('15a', '15b');">RESERVE</a></div>
<div style="display: none;" id="15b"><a href="javascript: expandCollapse('15a', '15b');">RESERVE</a><br />-- Library Use Only<br />-- No Time Limit<br />-- Due by library closing time</div>
</li>
<li>
<div id="16a"><a href="javascript: expandCollapse('16a', '16b');">MEDIA</a></div>
<div style="display: none;" id="16b"><a href="javascript: expandCollapse('16a', '16b');">MEDIA</a><br />-- Three Day Checkout</a><br />-- Not Due on Weekends<br />-- Renewable</div>
</li>
</ul>