jquery slide toggle divs without creating multiple classes, functions, etc... ui accordion
- by SPE
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 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>
