title: Accordion Troubleshooting
body: <p>I know I keep putting out these troubleshooting things, but I seriously have researched this on api documentation and looked for other answers on Stackoverflow and nothing is coming up. I have a accordion div that takes the right css, but is not working as an accordion. This is html code:</p>
  
  <pre><code>&lt;div id="accordion" class="ui-accordion"&gt;
  &lt;ul&gt;
          &lt;h3 class="ui-accordion-header"&gt;Page One&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#1a"&gt;Subpage 1A&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#1b"&gt;Subpage 1B&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#1c"&gt;Subpage 1C&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/div&gt;
          &lt;h3 class="ui-accordion-header"&gt;Page Two&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#2a"&gt;Subpage 2A&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#2b"&gt;Subpage 2B&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#2c"&gt;Subpage 2C&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/div&gt;
          &lt;h3 class="ui-accordion-header"&gt;Page Three&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#3a"&gt;Subpage 3A&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#3b"&gt;Subpage 3B&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="ui-accordion-content"&gt;&lt;a href="#3c"&gt;Subpage 3C&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my javascript code</p>
  
  <pre><code>$(document).ready(function () {
  $('#accordion').accordion();
  });
  </code></pre>
  
  <p>And Finally here is my css for the elements shown:</p>
  
  <pre><code>.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  padding: .5em .5em .5em .7em;
  min-height: 0; /* support: IE7 */
  }
  .ui-accordion .ui-accordion-icons {
  padding-left: 2.2em;
  }
  .ui-accordion .ui-accordion-noicons {
  padding-left: .7em;
  }
  .ui-accordion .ui-accordion-icons .ui-accordion-icons {
  padding-left: 2.2em;
  }
  .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
  position: absolute;
  left: .5em;
  top: 50%;
  margin-top: -8px;
  }
  .ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/mherPresident/VAw52/1/" rel="nofollow">jsFiddle</a> example:</p>
  
  <p>Please review and help me know how to get this collapsing and expanding.</p>