Hi all,

I'm looking to try and improve the speed and readability of my javascript code. I've got a simple function that, using jQuery, toggles whether items in an unordered list are visible or not. I was just wondering if this is the best way of doing it or whether I should be taking another approach? The list items with the class "hiddenItem" are set to "display: none;" by default in my CSS.

Here is the function:
Code:
<script type="text/javascript">
		function toggleHidden(divID, aID) {
			$('#lst' + divID + ' li.hiddenItem').slideToggle();
			if ($('#' + divID + 'Label').html() == "MORE " + aID) {
				$('#' + divID + 'Label').html('FEWER ' + aID);
			} else {
				$('#' + divID + 'Label').html('MORE ' + aID);
			}
		}
	</script>
And its called like this:
Code:
<li class="filteritem"><a href="#" onclick="toggleHidden('Sectors', 'SECTORS'); return false;" id="SectorsLabel">MORE SECTORS</a></li>
And here is a sample UL:
Code:
<ul id="lstSectors">
<li class="filteritem"><a href="#">Technology/R&amp;D<span class="filteramount"> (584)</span></a></li>
<li class="filteritem"><a href="#">Vehicle product &amp; design<span class="filteramount"> (404)</span></a></li>
<li class="filteritem"><a href="#">Environment<span class="filteramount"> (244)</span></a></li>
<li class="filteritem hiddenItem"><a href="#">Service suppliers/supply chain<span class="filteramount"> (178)</span></a></li>
<li class="filteritem hiddenItem"><a href="#">Electric drive<span class="filteramount"> (159)</span></a></li>
<li class="filteritem hiddenItem"><a href="#">Commercial vehicles<span class="filteramount"> (153)</span></a></li>
<li class="filteritem hiddenItem"><a href="#">Aftermarket<span class="filteramount"> (92)</span></a></li>
<li class="filteritem"><a href="#" onclick="toggleHidden('Sectors', 'SECTORS'); return false;" id="SectorsLabel">MORE SECTORS</a></li>
</ul>
Maybe this is hugely costly performance wise or maybe its right on the money, that's why I'm here.

Any feedback is greatly appreciated.

Thanks,
Tex