Div change script missing something???

I wrote a simple script to change a div's visibility onClick.

I have 3 divs and only one is visible at a time.

By clicking the next or previous buttons it changes the visiblity to show the correct div. I wrote each click to be a function to change the css styles of each to show the correct div and hide the others.

It does not work, please help me to accomplish this functionality please, thank you.

Here is my code:

<script type="text/javascript">
function changePopuptoPane1() {
	document.getElementById('paneOne').style.visiblity='visible';
	document.getElementById('paneTwo').style.visiblity='hidden';
	document.getElementById('paneThree').style.visiblity='hidden';
}
function changePopuptoPane2() {
	document.getElementById('paneOne').style.visiblity='hidden';
	document.getElementById('paneTwo').style.visiblity='visible';
	document.getElementById('paneThree').style.visiblity='hidden';
}
function changePopuptoPane3() {
	document.getElementById('paneOne').style.visiblity='hidden';
	document.getElementById('paneTwo').style.visiblity='hidden';
	document.getElementById('paneThree').style.visiblity='visible';
}
</script>
<style type="text/css">
#paneOne {
	visibility:visible;
}
#paneTwo {
	visibility:hidden;
}
#paneThree {
	visibility:hidden;
}
#paneOne span {
	cursor:pointer;
}
#paneTwo span {
	cursor:pointer;
}
#paneThree span {
	cursor:pointer;
}
</style>
<div class="innerContent">
 
	<div id="paneOne">
		This is Pane 1<br>
		<span onClick="changePopuptoPane2();">Next</span>
	</div>
	<div id="paneTwo">
		This is Pane 2<br>
		<span onClick="changePopuptoPane1();">Previous</span> || <span onClick="changePopuptoPane3();">Next</span>
	</div>
	<div id="paneThree">
		This is Pane 3<br>
		<span onClick="changePopuptoPane2();">Next</span>
	</div>
 
</div>
 
</div>

Select allOpen in new window