Jquery Ui Accordion

Question

I have used the following link to create a accordion for a website, but I would like to change few to it, tried all over the net couldn't find the solution.

I want to change when we add a new accordion close the accordion if any open. Also when added the first accordion always opens which I think I have solved some what.

you can find the demo under the following link,

 [link] http://jsfiddle.net/gnhkm4es/

Thanks in Advance

Answer 1

Try adding $('.questions').accordion({active:false}); after $('.questions').accordion("refresh");

http://jsfiddle.net/gnhkm4es/10/

$(document).ready(function() {    
    $( ".questions" ).accordion({
        header: "> div > h3",
        collapsible: true,
        active: false,
        autoHeight: false,
        autoActivate: true
    });

    $( "button" ).button();
    $('#addAccordion').click( function() {
        var newDiv = "<div><h3>Q4 New Question</h3><div>New Content</div></div>";
        $('.questions').append(newDiv)
        $('.questions').accordion("refresh"); 
        $('.questions').accordion({active:false}); 
    });
});

if you want to open the last panel in the accordion replace false with -1 $('.questions').accordion({active:-1}); refer accordion documentation under active http://api.jqueryui.com/accordion/

Answer 2

You should try this:

$(document).ready(function() {

    $( ".questions" ).accordion({
        header: "> div > h3",
        collapsible: true,
        active: false,             // this can be changed to 0 for first accordion opened
        autoHeight: false,
        autoActivate: true
    });

    $( "button" ).button();
    $('#addAccordion').click( function() {
        var newDiv = "<div><h3>Q4 New Question</h3><div>New Content</div></div>";
        $('.questions').append(newDiv)
        $('.questions').accordion("refresh").accordion( "option", "active", $('.questions > div').length - 1 );
    });
});

Working jsFiddle is