One function to slideToggle dynamically added elements
My page will have 100+ links on an image map. Each of these links will have a hidden div associated with it. i.e. So the first link when clicked should toggle it's corresponding div. I don't know why this isn't working. any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.countystats{
background-color:blue;
display:none;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$('.county').click(
function(){
var thisIs = $(this).index();
$('.countystats').eq(thisIs).slideToggle(300);
});
});
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
</div>
<div class="countystats">stats one</div>
<div class="countystats">stats two</div>
<br />
<br/>
</body></html>