Can't hide a column

I've been struggling with this. I had it working at one point, but now can't seem to get it to work. All I'm trying to do is hide a column when a button is clicked. As I said at one point this was working, but now I can't seem to change (or even find) the rules for this style. I can get to the style, and know it exists, but the rules don't seem to. The alert always gives me a null value, the first time I click, then I see "inline", but the column doesn't show up.

Thanks in advance for any help you can give.

<style>
.active-column-5 {
display: inline;
width: 50px;
background: #ffffcc;
text-align: right;
font-weight: bold;
}
</style>

<script>
function showHideCols() {
var rule = null;
var stylesheet = document.styleSheets[2];
var selector = ".active-column-5";
for (j = 0; j < stylesheet.rules.length; j++) {
if (stylesheet.rules(j).selectorText == selector) {
rule = stylesheet.rules(j);
break;
}
}

alert(rule.style.display);
if (rule.style.display == 'inline') {
rule.style.display = 'none';
} else {
rule.style.display = 'inline';
}
}
</script>

Ha. I'm an idiot. I needed to use styleSheets[3] not [2]

function show(group){
el = document.getElementById(group);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}


On HTML

<td width="200<a href="#" onClick="show('row')">Show</a></td>


You can hide this

<tr id="row" style="display:none;"><td>Something</td></tr>