Can't get fade out function to work more than once
<p>So this is the code that I have written.  i have very little knowledge of jquery and just tried to write what I saw.  I am sure their is an easier  I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click.  I am having the same problem on another script that I have, I can't seem to call a function more than one time.  One and done it what it seems to do.  Any help would be much appreciated.</p>

<pre><code>$.noConflict();
jQuery(document).ready(function($) 
{
$("#scrollmenu");

$("#e_emd").click(function () {
$("#e_em").show();
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");  
$("#e_l").delay(1200).fadeOut("slow");  
});

$("#e_vd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").show();
$("#e_s").delay(1200).fadeOut("slow");  
$("#e_l").delay(1200).fadeOut("slow");  
});  

$("#e_sd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").show(); 
$("#e_l").delay(1200).fadeOut("slow");  
});  

$("#e_ld").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");  
$("#e_l").show();
});  
});  



&lt;!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT --&gt;
&lt;div id="scrollmenu"&gt;| 
&lt;a id="e_emd" href="#Event_Management" class="panel"&gt;Event Management&lt;/a&gt; | 
&lt;a id="e_vd" href="#Video" class="panel"&gt;Video&lt;/a&gt; | 
&lt;a id="e_sd" href="#Sound" class="panel"&gt;&lt;/a&gt;Sound | 
&lt;a id="e_ld" href="#Lighting" class="panel"&gt;Lighting &amp; Staging&lt;/a&gt; | 
&lt;/div&gt;

&lt;img id="e_em" src="images/eventmanage.png" width="1037" height="480" /&gt;
&lt;img id="e_v" src="images/video.png" width="1128" height="480" /&gt;
&lt;img id="e_s" src="images/sound.png" width="1011" height="480" /&gt;
&lt;img id="e_l" src="images/light.png" width="1011" height="480" /&gt;
</code></pre>

<p>I have upoloaded the full page I am working on.</p>

<p>The site I am trying it on is here <a href="http://www.mac-av.com/test2/" rel="nofollow">http://www.mac-av.com/test2/</a></p>

<p>What I am seeing is that I can't use an id more than once to call a function where i have</p>

<pre><code>&lt;div id="scrollmenu"&gt;| 
&lt;a id="e_emd" href="#Event_Management" class="panel"&gt;Event Management&lt;/a&gt; | 
&lt;a id="e_vd" href="#Video" class="panel"&gt;Video&lt;/a&gt; | 
&lt;a id="e_sd" href="#Sound" class="panel"&gt;&lt;/a&gt;Sound | 
&lt;a id="e_ld" href="#Lighting" class="panel"&gt;Lighting &amp; Staging&lt;/a&gt; | 
&lt;/div&gt;
</code></pre>

<p><strong>Multiple times on the same page</strong></p>

<p>I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have.  I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category.  So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.</p>

<p>It will work for the first set of buttons, but not afterwards.  I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?</p>
