CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-accordion
Mr Kohn Doew
Mr Kohn Doew

Reputation: 277

jQuery UI Accordion doesn't work with HTML templates

I am struggled with accordion UI. It works with static test content like this:

<h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
<h3>Section 2</h3>
    <div>
        <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>

However, I generate content using template:

<h3 class="rightarticle_ad">
    ${title}
</h3>
<div class="rightarticle">
    <ul>
    {{each subitems}}
    <li>
        <a href="${url}">${title}</a>
            {{if description}}
            <div class="description">${description}</div>
            {{/if}}
    </li>
    {{/each}}
    </ul>
</div>

My JavaScript/jQuery code is:

$.get('/templates/nav-cats.html', function(templates) {
    $.tmpl(templates, navigationJson).appendTo("#navaccordion").accordion();
});

So the issue is that it doesn't apply collapse state, all items are always open. I figured out if I wrap template code in paragraph element accordion works> it works in strange way: all items are opened, it has two additional buttons each reponsible only for open or hide content and the header lays below one of them.

Could you suggest what I am doing wrong? Seems like it would be some kind of novice issue.

UPDATE:

<head></head>
<body>
    <div id="header"></div>
    <div class="content">
        <div id="dialog" title="Dialog Title"></div>
        <div id="articles">
            <div id="left"></div>
            <div id="right">
                <div id="searchformcontainer"></div>
                <div id="rightmenu">
                    <div id="navaccordion">
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist">

                                 Categories 

                        </h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist">
                            <ul id="ui-accordion-3-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-acco…ader-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-accordion-3-panel-0" aria-selected="true" aria-expanded="true" tabindex="0">
                                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                                <li>
                                    <a href="#">

                                        Client-side development

                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        Java

                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        .Net

                                    </a>
                                </li>
                                <li></li>
                            </ul>
                        </div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist">

                                 Advertisment 

                        </h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist">
                            <ul id="ui-accordion-6-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-acco…ader-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-accordion-6-panel-0" aria-selected="true" aria-expanded="true" tabindex="0"></ul>
                        </div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist"></h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist"></div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist"></h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="links"></div>
    </div>
    <div id="additional"></div>
    <div id="whiteline"></div>
    <div id="footer"></div>
    <ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none;"></ul>
</body>

Upvotes: 1

Views: 638

Answers (1)

Pete
Pete

Reputation: 58452

Try using the following to make your accordion:

$.get('/templates/nav-cats.html', function(templates) {
    $.tmpl(templates, navigationJson).appendTo("#navaccordion");
    $("#navaccordion").accordion();
});

Upvotes: 2

Related Questions