Get the accordion style for non-accordion elements

Question

Hi,

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. So 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.

Answer 1

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..

Answer 2

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.