jquery - simple accordion
<p>Its a simple Accordion, this is what I want <a href="http://jsfiddle.net/tq5Y8/" rel="nofollow">Here</a> but i need to edit the HTML code to pass the validation. And I don't know how to customize the jquery. my sample code is <a href="http://jsfiddle.net/jhunlio/8kp3D/" rel="nofollow">here</a></p>

<p>Origal code:</p>

<pre><code>&lt;ul id="accordion"&gt;
    &lt;li&gt;Sports&lt;/li&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Golf&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Cricket&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;li&gt;Latest&lt;/li&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Golf&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cricket&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/ul&gt;
</code></pre>

<p>to this code: </p>

<pre><code>&lt;ul id="accordion"&gt;
    &lt;li&gt;Sports
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Golf&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Cricket&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;li&gt;Latest
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Golf&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cricket&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt; 
 &lt;/li&gt;
 &lt;/ul&gt;
</code></pre>
