Accordion Spry is defaulting to all tabs open. What's wrong?

Question

Hi,
I had my accordion spry working perfectly a week ago. Then, I tried to add another panel at the top, and all of a sudden all tabs default open. I'd like them to go back to all being closed on default. I've been over my coding again and again for a week and can't figure out what I did wrong. I can get the first panel to close on default by changing the default panel to -1, but that only makes the other panels look odd for being open. Here's my code shortened to the important parts:
<div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love...
(rest of content + 5 more tabs)
</div><script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1});
//-->
</script>
my url is: http://www.7elementsBR.com/courses
Can anyone help me figure this puzzle out? Thank you.

Answer 1

C F McBlob wrote:
There are SEVERAL paragraph tags that are "unclosed". That can throw the whole Spry function off.
No, it can't. The closing tag of a paragraph is optional. The reason it's triggering an error in the W3C validator is because an XHTML doctype is being used. Many of the other "errors" are caused by the JavaScript being read by the validator as though it were HTML.
However, you're right about unclosed tags. The problem with the accordion is being cause by incorrectly nested divs.
This is how the content div should look:
  <div class="content">
    <h1>Courses (Fall 2013) </h1>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love being in a class with your friends/family learning exactly what you like learning and on your schedule? You can customize what materials you use, how often you come, the time you come, studying only abstract or realism, maybe a little bit of everything? Price is determined by your selections.
          <p><a href="customcourse.html">Custom Course Form</a><br />        
        </div>
        </div> <!-- This closing tag is missing -->
        <div class="AccordionPanel">
        <div class="AccordionPanelTab">Basic Art (ages 6 - 12)</div>      
        <div class="AccordionPanelContent">
          <p>Mondays 4:30 - 6pm (No longer accepting Fall registrations.)     </p>
          <p>Students will get to sample these various mediums: pencil, charcoal, soft pastel, oil pastel, printmaking, watercolor, and acrylic painting. We will explore all 7 elements of art in order to create a good foundation for our young artists. Students are welcome to bring papers or canvas to create on, or feel free to visit the <a href="shop.html">shop</a>. All mediums are available for use and are included in the price. Course begins August 12.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />        
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Drawing (ages 6+)</div>
        <div class="AccordionPanelContent">
        <p>Thursdays 4:30 - 6pm (No longer accepting Fall registrations.)</p>
          <p>Students will learn the 7 elements of art through various drawing tools including: pencil, charcoal, soft pastel, and oil pastel. This is a class based on realism first, and finding your own style as an artist later. Students are welcome to bring papers to draw on, or feel free to visit the shop. All mediums are available for use and are included in the price.  Course begins August 15.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </p></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Open Studio </div>
        <div class="AccordionPanelContent">
        <p>Monday - Friday, 12 - 4pm (Call ahead of time @ 225.366.7442)</p>
          <p>This course is all about the artist as an individual. Instruction is not provided, and artists may come and go as pleased. Weekly critiques are Fridays 3 - 4pm and are not mandatory, but allow for feedback from multiple artists and provide answers for you to grow as an artist. Artists may work with any medium, and may choose to rent media for $5/hour. The studio is not open on 1st Fridays, holidays, Easter week,  Halloween week, Thanksgiving week, or Christmas week. </p>
          <p>Pricing: $5/hour or FREE for current students</p></div>
      </div>
            </div> <!-- This closing tag is missing -->
            <script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: 0});
//-->
</script>
    <!-- </div> This closing tag should be removed -->
    <p> </p>
    <p><a href="referafriend.html"><img src="images/refer.gif" alt="refer a friend" width="228" height="64" longdesc="images/refer.gif" align="right" /></a></p>
  </div>
<!-- end .content -->
The unclosed paragraph tags should also be fixed, but what's causing the problem with the accordion is incorrectly nested divs.