I am trying to make it so that the accordion (#subAccordion1) within the parent (#accordion) is closed by default (note: there is only one subAccordion).

I am having some trouble doing this..

Here is my jQuery that I have tried:

$(function() {
    $("#accordion, #subAccordion1").accordion(function() {
        autoHeight: false
        active: false
        collapsible: true
    });
});

And my HTML:

<div id = "accordion">
     <h1>Accordion1:</h1>
     <div>
         <p>Blah</p>

         <div id = "subAccordion1">
             <h1>Accordion1.1</h1>
             <div>
                 <p> BLAH BLAH BLAH</p>
             </div>
         </div>
      <h1>Accordion2:</h1>
      <div>
           <p>Blah</p>
      </div>
</div>

The 2 outer accordions (1 and 2) are working as intended just the inner one (1.1) is automatically expanded!

Thanks for any help

I am trying to make it so that the accordion (#subAccordion1) within the parent (#accordion) is closed by default (note: there is only one subAccordion).

I am having some trouble doing this..

Here is my jQuery that I have tried:

$(function() {
    $("#accordion, #subAccordion1").accordion(function() {
        autoHeight: false
        active: false
        collapsible: true
    });
});

And my HTML:

<div id = "accordion">
     <h1>Accordion1:</h1>
     <div>
         <p>Blah</p>

         <div id = "subAccordion1">
             <h1>Accordion1.1</h1>
             <div>
                 <p> BLAH BLAH BLAH</p>
             </div>
         </div>
      <h1>Accordion2:</h1>
      <div>
           <p>Blah</p>
      </div>
</div>

The 2 outer accordions (1 and 2) are working as intended just the inner one (1.1) is automatically expanded!

Thanks for any help

• javascript
• jquery
• html
• accordion

• Do you have jsfiddle link? – Khanh Tran Commented Apr 3, 2013 at 20:15
• may we assume your missing </div> is a typo? – Mark Schultheiss Commented Apr 3, 2013 at 20:23

2 Answers 2

Fix your HTML first (missing closing div):

<div id = "accordion">
     <h1>Accordion1:</h1>
     <div>
         <p>Blah</p>
         <div id = "subAccordion1">
             <h1>Accordion1.1</h1>
             <div>
                 <p> BLAH BLAH BLAH</p>
             </div>
         </div>
      </div>
      <h1>Accordion2:</h1>
      <div>
           <p>Blah</p>
      </div>
</div> 

JavaScript

$(function() {
  // init parent accordion
  $("#accordion").accordion( { heightStyle: "content" });

  // init sub accordion via #id selector with options object
  $("#subAccordion1").accordion({
                autoHeight: false,
                active: false,
                collapsible: true,
                heightStyle: "content"
   });
});

Try

$("#accordion, #subAccordion1").accordion({

instead of

$("#accordion, #subAccordion1").accordion(function() {