tab conten beim start alle geschlossen

[hups1803]

Hallo,

ich habe ein tabbed content mit diesen script

onload = function() {
	
	var e, i = 0;
	while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
		if (e.className == 'on' || e.className == 'off') {
		e.onclick = function () {
			var getEls = document.getElementsByTagName('DIV');
				for (var z=0; z<getEls.length; z++) {
				getEls[z].className=getEls[z].className.replace('show', 'hide');
				getEls[z].className=getEls[z].className.replace('on', 'off');
				}
			this.className = 'on';
			var max = this.getAttribute('title');
			document.getElementById(max).className = "show";
			}
		}
	}
}

nun möchte ich gerne das der erste button noch ein toggle bekommt so das mit klick auf den ersten button danz ganze wieder geschlossen ist.

hab es so versucht

$('#toggle').click(function() {
$('#Arena').toggle();
});

da beim start das erste content eine class mit hide hat muss auch die class wohl getoggelt werden.

<div id='gallery'align='center'>
<div class='off' id='toggle'title='".$caption1."'><span>".$caption1."</span></div>
<div class='off' title='zwei'><span>".$caption2."</span></div>
</div></div>
<div id='Arena' class='hide'>  
inhalt
</div>
<div  class='hide'>  
inhalt
</div>

nur leider weiss ich nicht wie

hatte das versucht

$('#Arena').toggleClass('show');

aber das 1 haupscript macht wieder hide so das ich dan im code mehrmals hide in der class habe