0

I have an accordion where I'm dynamically creating new elements. However, when I do I cannot seem to get the newest element to default to open. It's always the first element.

Ideas?

Here's the HTML:

    <asp:MultiView ID="MainView" runat="server">
        <asp:View ID="View1" runat="server">
            <table style="width: 100%; border-width: 3px; border-color: #C4F691; border-style: solid">
                <tr>
                    <td>
                        <div class="rowClassSpace">
                            &nbsp;</div>
                        <div id="accordion">
                            <a href="#">Make/Model (Insured Vehicle)</a>
                                <div>
                                    <p>
                                        Content
                                    </p>
                                </div>
                        </div>
                        <div>
                            <button id="addAccordion">
                                Add Another Vehicle</button>
                            </div>
                    </td>
                </tr>
            </table>
        </asp:View>
    </asp:MultiView>

Here's the JS:

    //  Initialize accordion
    $(document).ready(function () {
        $(function () {
        $("#accordion").accordion();
        });
     });

    //  Adding according sections
    $('#addAccordion').click(function () {
    });

    function addAccordion() {
       var active = $('#accordion').accordion('option', 'active');
       $('#accordion').append('<a href="#">Make/Model (Other Car #)</a><div><p>New data</p></div>').accordion('destroy').accordion({ active: active});
       }
4

1 に答える 1

1

メソッドを使用destroyして既存を破棄し、新しいセクションを追加してから、新しいアコーディオン インスタンスを初期化することを提案します。<a>また、あなたが使用しているマークアップはタグを使用して奇妙に思えます

既存のセクションをカウントすることによりactive、新しいセクションが追加される前にインデックスをセクションの数に設定して、追加された最新のセクションが開かれるようにすることができます

var template=function(ctr){
   /* using html markup per docs*/
    return '<h3>Section '+ctr+'</h3><div>Content '+ctr+'</div>';
};

var accordOptions={
    collapsible:true,
    active:0
};
var $accord=$('#accordion').accordion(accordOptions);

$('button').click(  addSection);

function addSection(){
    var num_sections=$accord.children('h3').length;
    /* set active index to number of current sections*/
    accordOptions.active=num_sections;
    $accord.accordion('destroy')
            .append( template( num_sections +1 ) )
            .accordion( accordOptions);
}

デモ: http://jsfiddle.net/HnVqD/

于 2013-04-08T21:47:08.097 に答える