slideToggle btn-x for panel-x

slideToggle btn-x for panel-x

I am trying


JQUERY
  1. $(document).ready(function() {
  2.       $(".panel-toggle-1").slideUp();
  3.        $(".btn-panel-toggle-1").click(function() {
  4.             $(".panel-toggle-1").slideToggle("slow");
  5.       });
  6. });


HTML
  1. <b class="btn-panel-toggle-1">btn-panel-toggle-1</b>
  2. <b class="btn-panel-toggle-2">btn-panel-toggle-2</b>
  3. <b class="btn-panel-toggle-3">btn-panel-toggle-3</b>
  4. <div class="panel-toggle-1">panel-toggle-1</div>
  5. <div class="panel-toggle-2">panel-toggle-2</div>
  6. <div class="panel-toggle-3">panel-toggle-3</div>


CSS
  1. div[class*="panel-toggle-"]{
  2. display:none;
  3. }


my needs :
only one JQuery function for all -->  btn- panel-toggle-?   for   panel-toggle-?  1 must  toggle 1 , 2 must toggle 2 , ....

 I cannot use next or parent because they are not at the same place


Thanks for helping