$(function(){
$('#afloor1, #afloor2, #afloor3, #afloor4, #afloor5, #afloor6').each(function(i){
$(this).click(function(){
$('#ulpanel'+(i+1)).slideToggle('fast').toggleClass('active');
});
});
});
UPD А вообще лучше как-то так:
<!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" xml:lang="en" lang="en">
<head>
<title>Без имени</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
</head>
<style type="text/css">
.afloor {
border: 3px solid green;
margin: 3px;
width: 30%;
cursor: pointer;
}
.ulpanel {
border: 3px solid navy;
margin: 3px;
width: 50%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('.afloor').each(function(i){
$(this).click(function(){
$('.ulpanel:eq('+i+')').slideToggle('fast').toggleClass('active');
});
});
});
//-->
</script>
<body id="sidebar">
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
</body>
</html>