Menu icon Foundation
accordion panels not working after using emmett

No idea why, but after using emmett to create accordions with panel tabs, you can't click the tabs to change tabs anymore. It just stays static on the first tab even though the ID's are set and everything. Thing is, on the template I hand coded or rather took from foundation template, that still works. Here is the not working code:

<dl class="accordion accorborder" data-accordion>
    <dd class="accordion-navigation">
        <a href="#p2">Class XXXXX</a>
        <div id="p2" class="content">
            <div class="row">
                <div class="small-6 columns">
                    <h6>code:</h6>
                </div>
                <div class="small-6 columns">
                    <h6>Course Materials:</h6>
                    <ul>
                        <li><a href="">Syllabus</a></li>
                        <li><a href="">Course Contract</a></li>
                        <li><a href="">White Board</a></li>
                    </ul>
                </div>
            </div>
            <p></p>
            <dl class="tabs" data-tab>
                <dd class="active"><a href="#p2a">Study Sheets</a></dd>
                <dd><a href="#p2b">Study Sheets Answer Keys</a></dd>
                <dd><a href="#p2c">Graded Assignments</a></dd>
                <dd><a href="#p2d">Graded Assignment Answer Keys</a></dd>
            </dl>
            <div class="tabs-content">
                <div class="content active" id="p2a">
                    <ul class="ss">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2b">
                    <ul class="ssa">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2c">
                    <ul class="ga">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2d">
                    <ul class="gaa">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </dd>
</dl>

            

         

while this works:

<dl class="accordion accorborder" data-accordion>
        <dd class="accordion-navigation">
            <a href="#p1"><span class="alert label">PIE</span><span class="label">OFL</span><span class="success label">OFY</span>ENGLISH 9 Common Core Semester 1 </a>
            <div id="p1" class="content">
               <div class="row">
                   <div class="small-6 columns">
                        <h6>Code:</h6>HS-ES-113 
                        <h6>Grade Level:</h6> 9
                   </div>
                   <div class="small-6 columns">
                       
                       <h6>Course Materials:</h6> 
                       <ul>
                           <li>
                               <a href="#">Syllabus</a>
                           </li>
                           <li>
                               <a href="#">Course Contract</a>
                           </li>
                           <li>
                               <a href="#">White Board</a>
                           </li>
                       </ul>
                   </div>
               </div> 
                <p>English 9 provides an introduction to informational and literary genres and lays a foundation of critical reading and analytical 
writing skills. Through texts that range from essays, speeches, articles and historical documents to a novel, a play, poetry 
and short stories, students analyze the use of elements of literature and nonfiction. As they develop their writing skills and 
respond to claims, students learn to formulate arguments and use textual evidence to support their position. To hone their 
listening and speaking skills, students engage with a variety of media types through which they analyze and synthesize 
information, discuss material, create presentations, and share their work.

                </p>
<!--                Panels-->
        <dl class="tabs" data-tab>
        <dd class="active"><a href="#p1a">Study Sheets</a></dd>
        <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
        <dd><a href="#p1c">Graded Assignments</a></dd>
        <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="p1a">
              <ul class="ss">
              <li><a href="#">Study Sheet Unit One</a></li>
              <li><a href="#">Study Sheet Unit Two</a></li>
              <li><a href="#">Study Sheet Unit Three</a></li>
              <li><a href="#">Study Sheet Unit Four</a></li>
              <li><a href="#">Study Sheet Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1b">
          <ul class="ssa">
              <li><a href="#">Study Sheet w/ Answers Unit One</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Two</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Three</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Four</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1c">
          <ul class="ga">
              <li><a href="#">Graded Assignment Unit One</a></li>
              <li><a href="#">Graded Assignment Unit Two</a></li>
              <li><a href="#">Graded Assignment Unit Three</a></li>
              <li><a href="#">Graded Assignment Unit Four</a></li>
              <li><a href="#">Graded Assignment Unit Five</a></li>

         </ul>
        </div>
        <div class="content" id="p1d">
          <ul class="gaa">
              <li><a href="#">Graded Assignment w/ Answers Unit One</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Two</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Three</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Four</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Five</a></li>

              </ul>
        </div>
      </div>       
            </div>  
        </dd>
        </dl>
            

         

Someone please help I have no idea why the first one wont work.

accordionemmettjquery

No idea why, but after using emmett to create accordions with panel tabs, you can't click the tabs to change tabs anymore. It just stays static on the first tab even though the ID's are set and everything. Thing is, on the template I hand coded or rather took from foundation template, that still works. Here is the not working code:

<dl class="accordion accorborder" data-accordion>
    <dd class="accordion-navigation">
        <a href="#p2">Class XXXXX</a>
        <div id="p2" class="content">
            <div class="row">
                <div class="small-6 columns">
                    <h6>code:</h6>
                </div>
                <div class="small-6 columns">
                    <h6>Course Materials:</h6>
                    <ul>
                        <li><a href="">Syllabus</a></li>
                        <li><a href="">Course Contract</a></li>
                        <li><a href="">White Board</a></li>
                    </ul>
                </div>
            </div>
            <p></p>
            <dl class="tabs" data-tab>
                <dd class="active"><a href="#p2a">Study Sheets</a></dd>
                <dd><a href="#p2b">Study Sheets Answer Keys</a></dd>
                <dd><a href="#p2c">Graded Assignments</a></dd>
                <dd><a href="#p2d">Graded Assignment Answer Keys</a></dd>
            </dl>
            <div class="tabs-content">
                <div class="content active" id="p2a">
                    <ul class="ss">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2b">
                    <ul class="ssa">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2c">
                    <ul class="ga">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
                <div class="content" id="p2d">
                    <ul class="gaa">
                        <li><a href="">Study Sheet Unit 1</a></li>
                        <li><a href="">Study Sheet Unit 2</a></li>
                        <li><a href="">Study Sheet Unit 3</a></li>
                        <li><a href="">Study Sheet Unit 4</a></li>
                        <li><a href="">Study Sheet Unit 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </dd>
</dl>

            

         

while this works:

<dl class="accordion accorborder" data-accordion>
        <dd class="accordion-navigation">
            <a href="#p1"><span class="alert label">PIE</span><span class="label">OFL</span><span class="success label">OFY</span>ENGLISH 9 Common Core Semester 1 </a>
            <div id="p1" class="content">
               <div class="row">
                   <div class="small-6 columns">
                        <h6>Code:</h6>HS-ES-113 
                        <h6>Grade Level:</h6> 9
                   </div>
                   <div class="small-6 columns">
                       
                       <h6>Course Materials:</h6> 
                       <ul>
                           <li>
                               <a href="#">Syllabus</a>
                           </li>
                           <li>
                               <a href="#">Course Contract</a>
                           </li>
                           <li>
                               <a href="#">White Board</a>
                           </li>
                       </ul>
                   </div>
               </div> 
                <p>English 9 provides an introduction to informational and literary genres and lays a foundation of critical reading and analytical 
writing skills. Through texts that range from essays, speeches, articles and historical documents to a novel, a play, poetry 
and short stories, students analyze the use of elements of literature and nonfiction. As they develop their writing skills and 
respond to claims, students learn to formulate arguments and use textual evidence to support their position. To hone their 
listening and speaking skills, students engage with a variety of media types through which they analyze and synthesize 
information, discuss material, create presentations, and share their work.

                </p>
<!--                Panels-->
        <dl class="tabs" data-tab>
        <dd class="active"><a href="#p1a">Study Sheets</a></dd>
        <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
        <dd><a href="#p1c">Graded Assignments</a></dd>
        <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="p1a">
              <ul class="ss">
              <li><a href="#">Study Sheet Unit One</a></li>
              <li><a href="#">Study Sheet Unit Two</a></li>
              <li><a href="#">Study Sheet Unit Three</a></li>
              <li><a href="#">Study Sheet Unit Four</a></li>
              <li><a href="#">Study Sheet Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1b">
          <ul class="ssa">
              <li><a href="#">Study Sheet w/ Answers Unit One</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Two</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Three</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Four</a></li>
              <li><a href="#">Study Sheet w/ Answers Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1c">
          <ul class="ga">
              <li><a href="#">Graded Assignment Unit One</a></li>
              <li><a href="#">Graded Assignment Unit Two</a></li>
              <li><a href="#">Graded Assignment Unit Three</a></li>
              <li><a href="#">Graded Assignment Unit Four</a></li>
              <li><a href="#">Graded Assignment Unit Five</a></li>

         </ul>
        </div>
        <div class="content" id="p1d">
          <ul class="gaa">
              <li><a href="#">Graded Assignment w/ Answers Unit One</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Two</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Three</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Four</a></li>
              <li><a href="#">Graded Assignment w/ Answers Unit Five</a></li>

              </ul>
        </div>
      </div>       
            </div>  
        </dd>
        </dl>
            

         

Someone please help I have no idea why the first one wont work.

James Stone almost 5 years ago

You should use a tool like KDIFF3 to help you spot any differences. I don't see anything that would cause an issue. Are you getting and JS errors in the console? Have you checked the rest of the page to see if there are any other differences. A missing " or closing can really mess things up.

If you run KDIFF on the two pages in their entirety, ignore white space, it should give you a good idea of where to look.

Ryan Hellerud almost 5 years ago

I checked as far much as my eye can see but ill check into kdiff3 and report back, thanks.

Ryan Hellerud almost 5 years ago

i tried installing kdiff but it gave me errors and wont install on. Im on windows, is there another program that is similar I could try?

Ryan Hellerud almost 5 years ago

thanks figured out that i had the same stupid text for all the panels so couldnt tell it was chaning and actually working lol. damn

James Stone almost 5 years ago

great. did you get kdiff3 installed or did you go with something else? I think it requires java.

Ryan Hellerud almost 5 years ago

Hey I couldnt get it installed. Kept getting .dll errors.