showing and hiding elements within a container
<p>I'm building a car parts assembly application and still working on the ideas.</p>

<p>The car parts are aligned above the certain field that represents the car image (main stage).
When the user clicks on the appropriate part, it glows on the big car image.</p>

<p>Now, I would like to make this possible by showing the appropriate div (image) on top of the main picture so that it kinda emphasizes the certain part. </p>

<p>I consider making a list with car parts that are clickable, and the list item should contain:
-car part image
-glow version of a car part that will show up on the main stage.</p>

<p>I believe I should be using function append() that will append the appropriate glow image from the list of car parts to the main stage.</p>

<p>The problem appears when I want to hide the image that has been appended to the main stage and return it to the list. </p>

<p>Is there a better way to do this?</p>

<p>I would like to hear some ideas.</p>

<p>This is how my code would look like:</p>

<pre><code>$(".parts li a").click(
    function () {
        if ($(this).parent().has(".glowimage")) {
            $(".main-stage").empty();
            }

            $(".main-stage").append($(this).parent().find(".glowimage").show());
            return false;
    }
);

&lt;div class="parts"&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href="#"&gt;&lt;img src="images/part1.png" alt="part1"/&gt;&lt;/a&gt;
                &lt;span class="cloud" style="display:none"&gt;
                    this is so great it worksthis is so great it worksthis is so great it works
                &lt;/span&gt;
                &lt;span class="glowimage" style="background:url(images/hover1.png) no-repeat right top;"&gt;
                &lt;/span&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>
