Refactor link to show/hide a table row
- by abatishchev
I have a table with row which cab be hidden by user. It's implemented this way:
Markup:
<table>
<tr>
<td>
<table style="margin-left: auto; text-align: right;">
<tr>
<td class="stats-hide">
<a href="#" onclick="hideStats();">Hide</a>
</td>
<td class="stats-show" style="display: none;">
<a href="#" onclick="showStats();">Show</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="stats-hide">
<td>
<!-- data -->
</td>
</tr>
</table>
And jQuery code:
<script type="text/javascript" language="javascript">
function hideStats() {
hideControls(true, $('.stats-hide'));
hideControls(false, $('.stats-show'));
}
function showStats() {
hideControls(false, $('.stats-hide'));
hideControls(true, $('.stats-show'));
}
function hideControls(value, arr) {
$(arr).each(function () {
if (value) {
$(this).hide();
}
else {
$(this).show();
}
});
}
</script>
How to implement the same behavior with one, single link and one, probably, CSS class?
My idea - store somewhere a boolean variable and toggle controls visibility relatively to this variable. Are there more?
