JQuery accordion script?

[rjoseph]

Hi Guys

Does anyone know of any simple/basic jquery vertical accordion scripts that allow me to place a html table in the info section (ie the window that pulls down and displays the hidden content)?

I have found loads of examples of accordion scripts out there but none allow me to show and hide a simple html <table>.

My current JQuery UI accordion script only allows me to put in text within <p> tags. I have tried replacing the <p> tabgs with <table> tags but this still didn't work.

My accordion script works fine when I have info between <p> tags. However, if I add a <table> element inside the <p> tags (or instead of them) then when you load the page the table is not hidden and it's also not possible to hide it when clicking the "Menu" link. My code can be seen here:

<style type="text/css">
.accordion2 {
width: 100%;
 
}
.accordion2 h2 {
color:#0066CC;
text-decoration: underline;
padding: 4px 0px;
margin: 0;
cursor: pointer;
font-size:9pt;
}
.accordion2 h2:hover {
 
}
.accordion2 h2.active {
background-position: right 50px;
}
.accordion2 p {
margin: 0;
padding: 5px 5px 5px;
display: none;
}
</style>
 
<script type="text/javascript"> 
$(document).ready(function(){ 
 
$(".accordion2 h2").eq().addClass("active"); 
$(".accordion2 p").eq().show(); 
 
$(".accordion2 h2").click(function(){ 
$(this).next("p").slideToggle("slow") 
.siblings("p:visible").slideUp("slow"); 
$(this).toggleClass("active"); 
$(this).siblings("h2").removeClass("active"); 
}); 
 
}); 
</script>
 
<div class="accordion2"> 
<h2 class='listing_acc'>Menu 1<h2> 
<p>Menu 1 info</p> 
</div>
 

Any ideas? Any help would be fully appreciated.

Best regards

Rod from the UK