Jquery accordion with repeater, row details are not visible when activating row

I am trying to use the jquery accordion with a repeater. I used the sample d开发者_运维百科irectly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.

<script>
$(document).ready(function () {
    $("#accordion").accordion();
});
</script>

<div id="accordion">
    <asp:Repeater ID="respondToExceptionsList" runat="server">

    <ItemTemplate>
        <h3><a href="#">Section 1</a></h3>
        <div>
            sdfffffffffffffff
        </div>
    </ItemTemplate>

    </asp:Repeater>
</div>

This is the html output.

<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
    <H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
    <SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
    <DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>

This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.