JQuery Accordion: Opened div cuts in to meet content (reference image given)

Question

Hi all,

I'll get right to it. Here's a pic of what I'm talking about in the title: JQuery Accordion Bug. Notice how the outline of the div cuts in on the right side to meet the content of what I've selected. I've blocked out the content of the div in Paint, for confidentiality reasons, but you get the idea. This happens when I already have another item opened, and try to open a different one. If all items are closed, and I click to open an item, it looks fine (actually, if you watch closely, it cuts in then re-adjusts correctly very fast). Only when one item is already open, and I click a different one does this glitch happen. Below is the code I'm using to set up the accordion:

$('#demo_accordion').accordion({
    header: "h3",
    active: false,
    autoHeight: false,
    collapsible: true
});

Notice that collapsible is set to true, so I'm only allowing one item to open at a time. Now, here is the html I'm using (in abbreviated form):

<div id="demo_accordion">
    <% foreach (var entry in Entries) %>
    <% { %>
            <div>
                <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3>
                <table>
                    <!-- table code here -->
                </table>
            </div>
    <% } %>
</div>

I'm using inline .NET C# as well, within the <% and %>. Don't know if it's something CSS related or what, but I'm pretty sure I'm following the demo's online exactly.

Any help would be appreciated. Thanks.

Answer 1

If you look at the docs, it gives you the html formatting for the accordion. What you want is something more like this where the table is in a block element, like a div and that div comes after the header. Having an encapsulating div around each accordion part is unnecessary.

Format should be:

<div id="demo_accordion">
   <% foreach (var entry in Entries) %>
   <% { %>
      <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3>
      <div> 
         <table>
            <!-- table code here -->
         </table>
      </div>
   <% } %>
</div>

Should solve your problem.