Accordion menu with tables?
I have a client who insists on having an accordion menu containing tables instead of <ul> elements. When I use tables in the accordion plugin, all of the tables are expanded under each accordion header.
One I click on the menu, the tables close up and the accordion functionality works perfectly.
It's just getting the menu to display correctly on page load. Does the accordion menu not recognize table elements and just expands all of them initially?
Here is my jQuery:
$(".accordion h4").eq(5).addClass("active");
$(".accordion table").eq(5).show();
$(".accordion h4").click(function(){
$(this).next("table").slideToggle("fast")
.siblings("table:visible").slideUp("fast");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});
I tried wrapping the table in a <div> to no avail. This code works perfectly with <ul> or other elements.
Any advice? Thanks!