title: jQuery UI accordion on an ordered list
body: <p>I am trying to incorporate some jQuery UI components into my company's html output for user documentation. I have very little experience with javascript. I got accordion to work for table rows but now I want to expand and collapse substeps under a step so an ordered list inside an ordered list but cannot seem to get it to work. Sorry if the answer is simple but PLEASE HELP ME!!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery UI Accordion - Collapse content&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script&gt;
   $(function() {
   $(".sub li:not(.accordion)").hide();
   $(".sub li:first-child").show();
  
   $(".sub li.accordion").click(function(){
       $(this).nextAll("li").fadeToggle(500);
   }).eq(0).trigger('click');
   });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ol class="sub"&gt;
              &lt;li class="accordion"&gt;Section 1&lt;/li&gt;
              &lt;ol&gt;
              &lt;li&gt;Description&lt;/li&gt;
              &lt;li&gt;This is text within section 1.&lt;/li&gt;
              &lt;/ol&gt;
              &lt;li class="accordion"&gt;Section 2&lt;/li&gt;
              &lt;ol&gt;
                  &lt;li&gt;Description&lt;/li&gt;
                  &lt;li&gt;This is text within section 2.&lt;/li&gt;
              &lt;/ol&gt;
      &lt;/ol&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>