showhide funktion

I en iframe har jeg defineret disse styles
<style type="text/css">
.dna {cursor:crosshair}
.toggle {color: GREEN; background-color: GREEN; layer-background-color: GREEN; border: 1px none GREEN; visibility: VISIBLE;}
.12 {color: RED; background-color: RED; layer-background-color: RED; border: 1px none RED; visibility: VISIBLE;}
.16 {color: BLUE; background-color: BLUE; layer-background-color: BLUE; border: 1px none BLUE; visibility: VISIBLE;}
.tk {color: #GREEN; background-color: BLACK; layer-background-color: BLACK; border: 1px none BLACK; visibility: VISIBLE;}
</style>

Så har jeg denne funktion hentet somewhere:
function showHide() {
        if(document.all) {
            toggle.style.visibility = (toggle.style.visibility=='visible'?'hidden':'visible');
        }
        else if(document.layers) {
            document.toggle.visibility = (document.toggle.visibility=='visible'?'hidden':'visible');
        }
        else if(isGecko()) {
            var myDivs = document.getElementsByTagName("div");
            myDivs['toggle'].style.visibility = (myDivs['toggle'].style.visibility=='visible'?'hidden':'visible');
        }
    }

Problemet er bare at den ikke virker, det er en række <div>s som hver især får en af disse styles afhængigt af deres funktion. Nu har jeg lavet en knap som så skulle kunne toggle om stylen toggle er vist/skjult.
<input name="tbn1" type="button" onClick="java script:showhide();"  value="Vis alle">

Det virker så ikke !! :-|

Det jeg gerne vil have er at funktionen kan kaldes med et parameter på hvilken style der skal toggles.

Er der en venlig sjæl som vil hjælpe.

På forhånd tak

E1