Make the selected elements Accordion widgets. Semantic requirements:

The markup of your accordion container needs pairs of headers and content panels:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

Use activate(Number) to change the active content programmatically.

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
 $('.accordion .head').click(function() {
  $(this).next().toggle();
  return false;
 }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
 $('.accordion .head').click(function() {
  $(this).next().toggle('slow');
  return false;
 }).next().hide();
});