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:
<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:
<li class="filteritem"><a href="#" onclick="toggleHidden('Sectors', 'SECTORS'); return false;" id="SectorsLabel">MORE SECTORS</a></li>
And here is a sample UL:
<ul id="lstSectors">
<li class="filteritem"><a href="#">Technology/R&D<span class="filteramount"> (584)</span></a></li>
<li class="filteritem"><a href="#">Vehicle product & 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