jquery slide toggle divs without creating multiple classes, functions, etc... ui accordion

Greetings, based on the jquery ui accordion I'm using, I have added a slide toggle to my accordion list items. so what happens is I click on an li and a 开发者_JAVA百科div slides down underneath to reveal more content.

The issue I'm having is that I find myself having to create multiple id's to reference the slidetoggle.

example of the div id css: #panel, #panel2, #panel3, #panel4, etc.... the

Is there a way I can use the slide toggle without having to adding another number so it will slide? I have 50 list items I'm using:

Here's a sample of the js (as you can see where I'm going with this):

 $(".btn-slide").click(function(){
   $("#panel").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });
 $(".btn-slide2").click(function(){
   $("#panel2").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });  

sample html:

  <li><div class="slide"><a href="#" class="btn-slide">One</a></div><div id="panel"></div></li>

  <li><div class="slide"><a href="#" class="btn-slide2">Two</a></div><div id="panel2"></div></li>  

This should work, everything in one bind:

 $(".slide a").click(function(){
   $(this).toggleClass("active").parent().siblings().slideToggle("slow");
   return false;
 });

If you could change the html up a bit (no numbering even!), say:

<li><div class="slide"><a href="#">One</a></div><div class="panel"></div></li>

You could have a more precise:

 $(".slide a").click(function(){
  $(this).toggleClass("active").closest("li").find(".panel").slideToggle("slow");
  return false;
 });