Issues using Toggle and FadeIn Simultaneously
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Fact&lt;/title&gt;

    &lt;style type="text/css"&gt;

    #fact_box {
      height: 200px;
      width: 200px;
      color: blue;
      border-style: dotted;
      position: relative;
    }


    .replace {
      height: 200px;
      width:  200px;
    }

    &lt;/style&gt;
    &lt;script type="text/javascript" src="jquery-1.4.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

$(function () {
    $("#fact_box").click(function () {
        $(this).toggle(function () {
            $(".box_image").fadeOut().replaceWith('&lt;div class="replace"&gt;' + "Superman Returns" + '&lt;/div&gt;');
        }, function () {
            $(".replace").fadeIn().replaceWith('&lt;img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/&gt;')
        });
    });
});

    &lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
  &lt;div id="fact_box"&gt;
  &lt;img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Hi, I need some help in debugging the JQuery code. When I click on the image, I want it to fadeout and be replaced by a div element. When I click on the div element next, I want it to be replaced by the image. Can someone tell me where I'm going wrong?</p>
