Question

When using jQuery’s Accordion (in a nested fashion), I want to ensure that when a parent element is clicked/opened, any open children are closed/rolled up. I’m not sure what selector(s) I should use when attempting to do this. So far I’ve tried rigging a change event with “activate” set to false, but that simply makes any element that is opened automatically close.

Assuming I only have 1 nested accordion, my jquery initialization looks like:

$(".accordion").accordion({
            active: false, collapsible: true, autoHeight: false, animated: 'swing'
        });

        $(".child-accordion").accordion({
            active: false, collapsible: true, autoHeight: false, animated: 'swing',
            change: function(event, ui) { $(".child-accordion").accordion("activate", false); }
        });

where .child-accordion is the nested instance. I need anything under the .child-accordion to be closed when a member of the .accordion is opened.

Answer 1

$(".accordion").accordion({
    collapsible: true,
    autoHeight: false,
    animated: 'swing',
    changestart: function(event, ui) {
        child.accordion("activate", false);
    }
});

var child = $(".child-accordion").accordion({
    active:false,
    collapsible: true,
    autoHeight: false,
    animated: 'swing'
});

The reason your version wasn’t working is two-fold

1. Your change event needs to be on the parent, because that’s when you want the children to roll up

2. You need to make the event changestart because when you set activate to false, the main thing it does is toggle the currently “visible” section in the child, but when the change event triggers on the parent, the child is already hidden, so it doesn’t do anything.

EDIT: here’s a working version of this http://jsfiddle.net/ryleyb/YPpEn/