title: toggle image using jquery
body: <p>I am having an <code>img</code> inside <code>&lt;p&gt;</code> tag and if I <code>click</code> the <code>img</code> or the <code>&lt;p&gt;</code> it needs to be <code>toggled</code> and the img should <code>changed</code>.</p>
  
  <p>I have done it by <code>adding</code>   <code>jQuery(this).attr("src", "img/hide.png");</code> but the img is not changing can any one suggest me the right path.</p>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(document).ready(function () {
          jQuery(".content").hide();
          //toggle the componenet with class msg_body
          jQuery(".heading").click(function () {
              jQuery(this).next(".content").slideToggle(500);
          });
        });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>.layer1 {
  margin: -5px;
  padding: 0px;
  width: 860px;
  }
  </code></pre>
  
  <p>This is my markup:</p>
  
  <pre><code>&lt;div class="layer1"&gt;
  &lt;p class="heading"&gt;&lt;img src="img/show.png" alt="" style="margin:0 5px 0 0;" /&gt;&lt;/p&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;p class="heading"&gt;&lt;img src="img/show.png" alt="" style="margin:0 5px 0 0;" /&gt;&lt;/p&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;p class="heading"&gt;&lt;img src="img/show.png" alt="" style="margin:0 5px 0 0;" /&gt;&lt;/p&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;p class="heading"&gt;&lt;img src="img/show.png" alt="" style="margin:0 5px 0 0;" /&gt;&lt;/p&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;p class="heading"&gt;&lt;img src="img/show.png" alt="" style="margin:0 5px 0 0;" /&gt;&lt;/p&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>