Hi all,
The following code almost works perfectly, except that the anchor text does not toggle on expand (+) and collapse (-). Any suggestions?
The following code almost works perfectly, except that the anchor text does not toggle on expand (+) and collapse (-). Any suggestions?
Code:
(JavaScript)
function Toggle(id, link) {
var ListItems = document.getElementsByTagName("div");
for(var x=0; x<ListItems.length; x++) {
name = ListItems[x].getAttribute("name");
if (name == 'ListItems') {
if (ListItems[x].id == id) {
if (ListItems[x].style.display == 'block') {
ListItems[x].style.display = 'none';
link.innerHTML = '+';
}
else {
ListItems[x].style.display = 'block';
link.innerHTML = '–';
}
}else {
ListItems[x].style.display = 'none';
link.innerHTML = '+';
}
}
}
}
(HTML)
<ul>
<li><a href="#" onclick="Toggle('ListItems1', this)">+</a> complete collection registration
<div name="ListItems" id="ListItems1" style="display:none">
<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
</div>
</li>
<li><a href="#" onclick="Toggle('ListItems2', this)">+</a> inventory database creation and management
<div name="ListItems" id="ListItems2" style="display:none">
<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
</div>
</li>
<li><a href="#" onclick="Toggle('ListItems3', this)">+</a> photographic documentation
<div name="ListItems" id="ListItems3" style="display:none">
<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.</li></ul>
</div>
</li>
</ul>