JQuery Accordion - Not Working Properly

Question

I'm setting up an accordion to work on one of my pages. And for some reason, it is not working correctly. I think that possibly it could be my section tags. Below is my HTML markup:

<section class="module flag-{style} {page_module_style}"> <!-- {page_module_style} is the embed for the accordion class/id -->
  <h1>{header}</h1>
  <div class="copy">
    {copy}
  </div>
</section>

I have applied the JQuery code from the JQuery UI site and JQuery Tools, and I get zero response. Below is JQuery UI code:

$(function() {
  $('#accordion').accordion();
});

I have changed in the JQuery from being an ID to a Class, as it is in my code, and swapped it there. Is it because of my section tags? Yes, the JQuery source is linked in my header, I have double checked.

PS I'm using the ExpressionEngine CMS, so in the HMTL markup, those are embeds inside the curly braces. I'm also trying to stay away from hand coding some JQuery, because this may be implemented on additional pages that may have different styling.

Answer 1

You are not specifiying the id accordion in your html. Use this

<div id="accordion">
    <section class="module flag-{style} {page_module_style}"> <!-- {page_module_style} is the embed for the accordion class/id -->
      <h1>{header}</h1>
      <div class="copy">
        {copy}
      </div>
    </section>
</div>