Multiple Div Toggle Show/Hide... IE7 not hiding.

[wallwriter]

Hi guys.
I have a page for a choir. There is an image of each member's head which when clicked on a div slides in containing an image and blurb of each individual.

The problem.... the div isn't hidden in IE7 or below.

Here's a link.

The page uses mootools v.1.1. and here's the script:

window.addEvent('domready', function(){
	var stretchers = $$('.display');
	var toggles = $$('.button');
	var mySliders = {};
	var myHiders = {};
	var visible = null;
	var marginreset;
 
	stretchers.each(function(el, i){
		mySliders[i] = new Fx.Slide(stretchers[i]);	
		myHiders[i] = new Fx.Slide(stretchers[i].getParent(), 
				    {			
                   onComplete: function(){ 
							marginreset = this.wrapper.firstChild.getStyle('margin');
							this.wrapper.firstChild.firstChild.setStyle('margin', marginreset);
														
							this.wrapper.firstChild.setStyle('margin', '0');
							this.wrapper.firstChild.setStyle('height', '0');
							
							this.wrapper.setStyle('height', 'auto');
							
							mySliders[myHiders['next']].toggle();
							visible = myHiders['next'];
                   }
           })	
		mySliders[i].hide();
	});
	toggles.each(function(el, i){
			toggles[i].addEvent('click', function(){				
					if ((visible != null) && (i != visible)) {
						myHiders['next'] = i;	
						myHiders[visible].toggle();
					}
					else {
						mySliders[i].toggle();
						visible = i;
					}
			});
	});
});

and relevant CSS

.button {
	color: #222;
	margin: 0 0.25em;
	padding: 2px 2px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	font-size: 11px;
	font-weight: normal;
	font-family: 'Andale Mono', sans-serif;
	display:block;
	text-align:center;
	background-color:#000000
	
}

a {
	outline: none !important; /* @ Firefox, remove ugly dotted border */
 }
 
a.button {
	text-decoration : none;
}


a.button:hover {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;

	
}

.display {
	
	padding-top : 1em;
	color:#FFFFFF;
}

 
.display p {
	margin: 0;
	padding: 4px;
	color:#FFFFFF;
}

#membtext {position:relative;width:700px; height:405px; background-image:url(../images/BG/memberbg.png); }

It all works fine in FF, Safari, Chrome, IE8, it's just IE7 and below that's the problem.