Selecting single user clicked img in jQuery
<p>I have an accordion menu that I am trying to get images to switch from plus to minus when the accordion is activated.  Currently I can only get all images to change to a minus when anything is clicked.  There are already bg images on the links and I really dont want to go that route.. </p>

<pre><code>$(function() {

$('#menu ul').hide();
$('#menu &gt; li').has('ul').children('a').addClass('disabled');
$('#menu').find('.disabled:last').addClass('lower');            //****=====will only add rounded corners to last menu item if it has a sub-menu=====****//
$('#menu').find('a:first').addClass('upper');
$('#menu &gt; li').has('ul').children('a.disabled').click(function() {
    if ( $(this).next('ul').is(':visible')) {
        return false;
    } else {
        if ( $(this).hasClass('lower')) {
            $(this).removeClass('lower');
            $(this).parent().find('li &gt; a:last').addClass('lower');
        } else {
            $(this).find('li &gt; a:last').removeClass('lower');
            $('#menu ul:visible').slideUp('medium', function() {
                $('#menu').find('.disabled:last').addClass('lower');
            });
        }
        $('#menu ul:visible').slideUp('medium', function() {
            $('#menu:visible').find('img.top').attr('src','images/menu-dropdown.png')});
        $(this).next('ul:hidden').slideDown('medium', function() {
            $('#menu:hidden').find('img.top').attr('src','images/menu-minus.png')});
    }
}); 
$("a.disabled").live("click", function() {
    return false;
});

});
</code></pre>

<p>there is the whole accordion now...</p>

<p>update: </p>

<pre><code>$('#menu ul:visible').slideUp(400);
        $(this).next('ul:hidden').slideDown(400);
            $(this).parent().find('img.top').attr('src','images/menu-minus.png');
    }
</code></pre>

<p>Changing it to that, gets them to change independently.  However I still can not get them to change back to the original img placing code where I thought it should go.</p>

<p>Update again: here is the menu HTML...</p>

<pre><code>&lt;ul id="menu"&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Style Guide&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Graphics &lt;img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /&gt;&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Templates&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Icons&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Symbols&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Best Practices&lt;img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /&gt;&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Guide&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Marketing&lt;img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /&gt;&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Icons&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Templates&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Pages Templates&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Template&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Template&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>
