Search code examples
c#jquerynestedaccordionrepeater

Repeater inside a repeater with jQuery accordion


I recently did a nested repeater according to this tutorial. The same thing

http://www.codeproject.com/Articles/6140/A-quick-guide-to-using-nested-repeaters-in-ASP-NET

But I added a jQuery accordion just like this example:

http://www.snyderplace.com/demos/accordion.html

Everything is good, but I realized some UI issues. I mean for example if one of my nested repeaters has 100 records and another has just 1 record, for this second with just 1 record, it has a blank space reserved as it had 100 records also. Someone knows how to fit the height each nested repeater to its elements?

<div id="accordion">
    <asp:Repeater ID="summary" runat="server" OnItemDataBound="summary_ItemDataBound">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <div>
                Id:<asp:Literal ID="litCategory" runat="server" />
            </div>
            <div>
                <asp:Repeater ID="detail" runat="server" OnItemDataBound="detail_ItemDataBound">
                <HeaderTemplate>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                        <tr>
                            <td><asp:Literal ID="litID" runat="server" /></td>
                            <td><asp:Literal ID="litName" runat="server" /></td>
                        </tr>
                </ItemTemplate>
                <FooterTemplate>
                        </tbody>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
            </div>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:Repeater>
</div>

Solution

  • I got it! I found this solution!

        $(function () {
            $("#accordion").accordion({
                collapsible: true,
                heightStyle: "content"
            });
        });
    

    I need to specify that to attributes and that's it!