I have a semi-working example that you can look at.
This appears to work as most would desire, though it shares a bug I am seeing in many other accordions, which is if you click on the an already opened header link, it will be closed, and then opened again.
Any elegant solutions?
Here is the jQuery
<script language="javascript">
$(document).ready(function() {
// Simple Accordion Style Menu Function
$('h2.question').click(function() {
$('div.answer').slideUp('normal');
$(this).next().slideDown('normal');
});
// Closes All Divs on Page Load
$("div.answer").hide();
// Opens the first div
var Current = $('.question:first');
Current.next().show();
});
</script>
And here is the basic markup I am looking to use:
<div class="accordion">
<h2 class="question"><a href="#">Header 1</a></h2>
<div class="answer">
<p>some body content 1</p>
<p>some body content 2</p>
<p>some body content 3</p>
</div>
<h2 class="question"><a href="#">Header 2</a></h2>
<div class="answer">
<p>some body content a</p>
<p>some body content b</p>
<p>some body content c</p>
</div>
<h2 class="question"><a href="#">Header 3</a></h2>
<div class="answer">
<p>some body content x</p>
<p>some body content y</p>
<p>some body content z</p>
</div>
</div>