Nested accordion menu in jQuery

Question

I have a menu implemented using a set of nested accordions, 1 and 2, each with elements, a and b.

I would like to impl

Answer 1

Just a few changes to the order of the elements in your HTML and you get the behavior you are looking for. At the start now only 1a and 1b are open. Similarly when you click on 1b now it will close 1a which will hide any open 2a/2b section as well.

    $(document).ready(function() {
        $("#acc1").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true
        });
        $("#acc2").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc2',
            clearStyle: true
        });
    });

    

        

            

            
            1a
                
            
            

                data of 1a

                data of 1a

                data of 1a

                

                    

                        

                        
                        2a
                            
                        
                        

                            data of 2a

                            data of 2a

                            data of 2a

                        
                    
                    

                        

                        
                        2b
                        
                        

                            data of 2b

                            data of 2b

                            data of 2b

                        
                    
                
            
        
        

            

            1b
            
            

                data of 1b

                data of 1b

                dta of 1b