css hide problem in Internet Explorer

[longstockings]

I'm messing about with attributes on a test site
Most of the attributes are hidden until a tick box is checked which calls a bit of javascript to show the hidden part.

It's working fine in Firefox but not at all in IE.
How can I get this to display correctly

Code in html_header.php looks like this

<style type="text/css"<!--
.show{display: block;}
.hide{display :none;}

--></style>
<script language="javascript" type="text/javascript">
//<![CDATA[
function showHidediv(strDivId, boolshowhide){
var styleSwitch;
if(boolshowhide) styleSwitch = "show";
else styleSwitch = "hide";
document.getElementById(strDivId).className = styleSwitch;
}
//]]>
</script>


Test it out here

http://westcountryfudge.co.uk/shop/i...&products_id=1

I would be greatfull for any solution

I've also tried visibility: hidden and collapse but that did not work either

[longstockings]

I've downloaded the scriptaculous javascript library but can't figure out how to get it to do what I want

I want to use a blind down effect on a checkbox set to onclick that when clicked will show a hidden part of the page

Can anyone help me out ?