Hi I am an absolute beginner and have tagged together the following code to show/hide multiple divs.

No surprise - it doesn't work! I have no understanding of what I am doing so any help would be appreciated!

CODE BELOW

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Toggle Test
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
.button
{
cursorointer;
}​
-->
</style>
</head>
<body>
<div class="buttons">
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">1</div>
<div id="div2" style="display:none;">2</div>
<div id="div3" style="display:none;">3</div>
<div id="div4" style="display:none;">4</div>
<script type="text/javascript">
$('#showdiv1').click(function(){
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function(){
$('div[id^=div]').hide();
$('#div2').show();
});

$('#showdiv3').click(function(){
$('div[id^=div]').hide();
$('#div3').show();
});

$('#showdiv4').click(function(){
$('div[id^=div]').hide();
$('#div4').show();
});​</script>
</body>
</html>