Jquery Load a div onclick event
<p>By default content of first div will load then when a user click on  tag,contents of that div should load.</p>

<p>HTML:</p>

<pre><code>    &lt;a class="first"&gt;one&lt;/a&gt;
    &lt;a class="second"&gt;two&lt;/a&gt;
    &lt;div&gt;
       &lt;li id="first"&gt;
           &lt;h2&gt;pen&lt;/h2&gt;
           &lt;div&gt;
               &lt;div&gt;parker&lt;/div&gt;
           &lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="second"&gt;
            &lt;h2&gt;car&lt;/h2&gt;
            &lt;div&gt;Bugatti&lt;/div&gt;
         &lt;/div&gt;
       &lt;/li&gt;
    &lt;/div&gt;​
</code></pre>

<p>JS:</p>

<pre><code>$(document).ready(function() {
    $("li#second").html();
    $("li#first").hide();
    $("a").click(function () {         
        var id = $(this).attr("class");  
        $("li#"+id).show().html();          
        $("li#second").hide();
     });
 });​
</code></pre>

<p>Now,when you click one,it will load but if you click two it will not load,i'm using <code>second.hide()</code>,how to get this working ?</p>
