Accordion loading.gif before loading content

Accordion loading.gif before loading content

Hi all,

hope someone could advise on how can I show a loading image before loading a content in jquery ui accordion content.

when I click the header, i want to show a loading.gif image (progress bar) before loading it's content.
I've tried to search using google but no luck thats why i'm trying my luck here in this forum since I know that most of the jquery master are here :)

Further, pls see below code that I have:

script:

  1. <script type="text/javascript">
        $(document).ready(function () {
            $("div.accordion2").accordion({
                collapsible: true, active: false, alwaysOpen: false,
                autoSize: true,animate:150, heightStyle: "content",
                beforeActivate: function (event, ui) {
                    var currHeader = $(ui.newHeader);
                    var indx = currHeader.attr("id");
                    $.ajax({
                        url: currHeader.attr("action"),
                        type: 'get',
                        data: { id: currHeader.attr("id") },
                        success: function (data) {
                            currHeader.next("div.accordionContent").html(data);
                            //$(".accordionContent" + indx).html(data);
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            currHeader.next("div.accordionContent").html("<span style='color:Red;'>Error loading data.</span>");
                        }
                    });
                }
            });
        });
    </script>























HTML:

  1.   <div class="accordion2">
                <h3 class="accordionHeader" id="2" action="http://localhost:49585/accordionAjaxCalls2.aspx">Related Documents</h3>
                <div class="accordionContent">
                    <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna. </p>
                </div> 
               
                <h3 class="accordionHeader" id="3" action="http://localhost:49585/accordionAjaxCalls.aspx">Version History</h3>
                <div class="accordionContent">
                    <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                    <ul>
                        <li>List item one</li>
                        <li>List item two</li>
                        <li>List item three</li>
                    </ul>
                </div>
                            
                     
               
                <h3 class="accordionHeader" id="4" action="http://localhost:49585/accordionAjaxCalls.aspx">References</h3>
                <div class="accordionContent">
                    <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                        mauris vel est.</p>
                    <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                        inceptos himenaeos.
                    </p>
                </div>
            </div>



































Thank in advance all.

Brgds,
Mike