Help selecting elements for accordian
I'm working on an accordion script that is applied to some html created from a Wordpress plug-in. Unfortunately, the markup the plug-in gives me is less than ideal for accordians:
-
<h3 class="tab active">October</h3>
<div class="tour-month">
</div>
<h3 class="tab">December</h3>
<div class="tour-month">
</div>
<h3 class="tab">April</h3>
<div class="tour-month">
</div>
<div class="tour-month">
</div>
<div class="tour-month">
</div>
My problem is that I have a few lines of jQuery I'm using for an accordion but it is usually applied to header followed by a div. Whereas, in this situation, due to the plug-in, each header is followed by a differing amounts of divs and I cannot simply wrap them in a container div with my current php knowledge.
Instead I'm hoping that I can figure out a way to only select the divs between h3 elements to hide so when you click on April, for instance, all of the divs after April will show.
Here's the jQuery I would normally use if my markup was a header for each accordian button followed by a div for the tabs content:
-
$(document).ready(function(){
$("h3").addClass("tab");
$("h3:first").addClass("active");
$(".tour-month:not(:first)").hide();
$("h3").click(function(){
$(".tour-month:visible").slideUp("slow");
$(this).next().slideDown("slow");
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
return false;
});
});
Thanks you for your help