jQuery nested accordion does not fully open:

Question

Could anyone help me out with the following:

The problem:

My code:

    $(document).ready(function () {
        $(function () {
            $('.additionalInfoAccordion').accordion({
                active: false,
                autoHeight: false,
                collapsible: true
            });
        });
    });

My divs:

    <div class="additionalInfoAccordion">
        <h3>Extra informatie</h3>
        <div>

            <div class="additionalInfoAccordion">
                <h3>Intern commentaar</h3>
                <div>
                    <p>
                        Internal comment:
                    <asp:TextBox ID="txtInternalComment" TextMode="MultiLine" runat="server"></asp:TextBox>
                    </p>
                </div>
            </div>
            <div class="additionalInfoAccordion">
                <h3>Extern commentaar</h3>
                <div>
                    <p>
                        Externe comment:
                    <asp:TextBox ID="txtExternalComment" TextMode="MultiLine" runat="server"></asp:TextBox>
                    </p>
                </div>
            </div>
            <div class="additionalInfoAccordion">
                <h3>Ontwikkeling</h3>
                <div>
                    <p>
                        DevStartDate:
                <asp:TextBox ID="txtDevStartDate" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        DevEndDate:
                <asp:TextBox ID="txtDevEndDate" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        Ontwikkeltijd:
                <asp:TextBox ID="txtDevTime" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        Versie:
                <asp:TextBox ID="txtReleaseVersion" runat="server"></asp:TextBox>
                    </p>
                </div>
            </div>
            <p></p>
        </div>
    </div>

The accordions do not open any further that it is now, how do I tell the jQuery to open them at "maximum range"? I hope someone can help me with this. Thanks in advance.

Answer 1

$('.additionalInfoAccordion').accordion({

  active: false,
  heightStyle: "content",
  collapsible: true

});