Q:

jQueryUI with multiple accordions?

I've got 3 accordions in some tabs my content doesn't show properly pics and code below,

<div id="tabs">
                      <ul>
                        <li><a href="#tabs-1">BREAKFAST</a></li>
                        <li><a href="#tabs-2">LUNCH</a></li>
                        <li><a href="#tabs-3">DINNER</a></li>
                      </ul>
                    <div id="tabs-1">
    <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>

                    </div>

same code above in both other tabs......
cheers,

A:

Use the heightStyle option for the accordions. You can set it to "content" or "fill" depending on the desired behaviour, keeping in mind that initially the closed tabs are not visible and so they have no height. It might be a good idea to have a set height for the tabs, but that really depends on your page layout. The tabs widget also has a heightStyle option you might want to fiddle with.
Example:
$('#tabs').tabs();

$('.accordion').accordion({
    heightStyle: "content"
});

Here's a jsfiddle

