there are a number of ways of doing this and make it look a lot cleaner
your problem could be that replaceWith replaces the whole element. Once you *replace* img#imp_plus001 that ID isn't there anymore so next time function runs it isn't found and no image change.
http://docs.jquery.com/Manipulation/replaceWith If you don't have firebug it would be well worth installing it and looking at the html it produces after this replacement. None of the original element is left
Not sure why you going to trouble of rewriting the html each time. You already utlized attr("src") and easily could have switched that each time for cleaner look but even that looks ugly in your if conditions. One way to clean this up would be to toggle a class on each click, something like
$('a#mainmenu_anchor001').click( function() {
///change image source , nothing will happen to selector that isn't there
$('img#imp_plus001 .minusORplus').attr("src", 'img/plus.gif');
$('img#imp_plus001').not('minusORplus').attr("src", 'img/minus.gif');
///toggle class, removes if already there, adds if not
$('img#imp_plus001').toggleClass('minusORplus');
});
To really shorten this up you could make images into sprite, give #imp_plus001 an absolute position then use the class"minusORplus" to shift the position of sprite in css. Adding and removing of class"minusORplus" would then shift your image each time and all you would need for script is
$('a#mainmenu_anchor001').click( function() {
$('img#imp_plus001').toggleClass('minusORplus');
});
css .minusORplus {left: ///minus width of image}
Max Fedorov wrote:
Hi, I have a following Jquery code, as you can see all it does when user clicks an html link it shows a hidden div (I am using SlideToggle). The problem is in changing plus icon on minus icon after we clicked on a link, for example when div is hidden we should show plus, after we clicked a link and shown a hidden div we are showing minus icon. It perfectly works in Chrome and Firefox. But in IE7 I got a problem, it changes plus on a minus only once, and then shows minus only. I am not sure what modifications should I make to my code to get it working in IE. Thanks in advance, really appreciate any help. //Hiding first level of main menu $('a#mainmenu_anchor001').click( function(event) { var minusORplus = $("img#imp_plus001").attr("src"); if ( minusORplus == 'img/plus.gif' ) { $('img#imp_plus001').replaceWith('<img src="img/minus.gif" id="imp_plus001" alt="" border="0" align="top" \/>'); } if ( minusORplus == 'img/minus.gif' ) { $('img#imp_plus001').replaceWith('<img src="img/plus.gif" id="imp_plus001" alt="" border="0" align="top" \/>'); } //Removing filter attribute $('div#sub_menu_level001').slideToggle("fast", function() { if(jQuery.browser.msie) { this.style.removeAttribute('filter'); } }); $('div#sub_menu_level001').css({'filter' : 'alpha(opacity=100)'}); event.preventDefault(); });
