title: How to toggle a hidden ul by clicking a link with jquery
body: <p>I have following code created dynamically with php.</p>
  
  <p>What I want to do is when I click class='toggle' with href of desc76, I want to show ul with id desc76.</p>
  
  <p>also I want to change arrowdown16.png to arrowup16.png.</p>
  
  <p>Then when I click it, ul will fadeOut or hidden again.</p>
  
  <p>class, secondul has CSS display:hidden;.</p>
  
  <p>I tried this, but it does not work.</p>
  
  <pre><code> $(".toggle").click(function () {
      event.preventDefault();
      var id = "#"+$(this).attr('href')
       $("id").show("slow");
      });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
  ...
  ...
  &lt;li class='toggledetail'&gt;
  Show Details
  &lt;div&gt;
  &lt;a href='desc76' class='toggle' &gt;
  &lt;img src="http://blablabla.com/assets/icons/arrowdown16.png"  alt="arrowdown16"  title="Show Details" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class='secondul' id='desc76'&gt;
  &lt;li class='listdetail'&gt;Spec Details&lt;div&gt;0&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;li class='toggledetail'&gt;
  Show Details&lt;div&gt;
  &lt;a href='desc75' class='toggle' &gt;
  &lt;img src="blablabla.com/assets/icons/arrowdown16.png"  alt="arrowdown16"  title="Show Details" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class='secondul' id='desc75'&gt;
  &lt;li class='listdetail'&gt;Spec Details&lt;div&gt;0&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  ... Here comes more ul
  ...
  </code></pre>