How to toggle between images
<p>I currently have a title and an image to the left <img src="http://i.stack.imgur.com/z85fk.jpg" alt="Before text is clicked"></p>

<p>When a user clicks on this link a description appears </p>

<p><img src="http://i.stack.imgur.com/TkT0C.jpg" alt="Text appears"></p>

<p>I do this using:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $(".hidden").hide();
        $("p.show").click(function () {
            $(this).next(".hidden").toggle()
        });
        $("p.show").hover().css('cursor', 'pointer');
    });
&lt;/script&gt;
</code></pre>

<p>However I would like the image to change when the text appears. I tried using replaceWith but that didn't work. I am still new to jQuery so any advice is great. I don't need an answer but just a pointer on what is best.</p>

<pre><code>&lt;p style="color:Black;float:left;padding-top:0px;" class="show"&gt;
&lt;img alt="+" src="resources/images/plussign.jpg" style="float:left; margin-right:10px;"/&gt;What is EFM?&lt;br /&gt;&lt;/p&gt;
&lt;div class="hidden"&gt;
  &lt;p style="margin-left:20px;"&gt;
    &lt;br /&gt;EFM, also known as Ethernet in the First Mile, is an Ethernet leased line
    service that runs over copper rather than the fibre optic cable used for
    other Ethernet services. The copper is provided in bonded pairs, making
    the connection extremely robust. If one copper pair fails, the others remain
    live, meaning you don’t suffer any downtime and can continue working with
    reduced bandwidth until normal service is restored.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
