Get the accordion style for non-accordion elements

I am completely new in jQuery UI's CSS styles so please bear with me.

I have to make a list of contact people.

<div id="accordion">
    <h3><a href="#">George Foo</a></h3>
    <div>
        some information
    </div>
    <h3><a href="#">Michelle Bar</a></h3>
    <div>
        some information
    </div>
    <h3><a href="#">Bill Wind</a></h3>
    <div>
        some information
    </div>
</div>

At first, I thought using the accordion style. However, usage showed me that opening more than one contact might be interesting as well. S开发者_如何学编程o I read the note on the bottom of the accordion page to use this instead of accordion:

From page:

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

My problem is that it doesn't look like accordion (smoothness style). I suppose I am not putting the accordion and head class at the right place, but as of now the names look like default links. How can I have the same look for the headers as the accordion effect, without using accordion? I tried searching around but from what I found that specific problem is not much discussed.

Thanks.

How about slideToggle() ?

$(document).ready(function() {
  $("#accordion a").click(function() {
    $(this).next.slideToggle();
    return false;
  }).next().hide();
});

If you want to add styles to the links that are accordionified (is that a word?), try something like:

$("#accordion a").each(function() {
  $(this).addClass('someClass').removeClass('someOtherClass');
});

If you're looking to discover exactly what styles accordion applies to the links, take a look at an implementation of it on another site, and inspect the elements with Firebug to see the classes used, then you can link in that stylesheet..

If you just want to make them have the accordion style you can inspect the classes jQuery UI adds to an actual accordion e.g. with a tool like Firebug. In the end it probably looks like this:

<div id="accordion" class="ui-widget-content padding ui-corner-bottom ui-accordion ui-widget">
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
        <a href="#">George Foo</a>
    </h3>
    <div>
        some information
    </div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
        <a href="#">Michelle Bar</a>
    </h3>
    <div>
        some information
    </div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
        <a href="#">Bill Wind</a>
    </h3>
    <div>
        some information
    </div>
</div>

If you just want to change the default behaviour of an existing accordion it might be easier to add your functionality there instead of rebuilding the whole thing.