Problem with javascript image swap

Hi guys,

I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.


Here's the javascript code

var News_Images = new Array();
News_Images[0]="images/max.gif"
News_Images[1]="images/min.gif"

function DisplayNews(body,box,link,id){

$(body + " > div > .news_box").each(function(){
if($(this).css("display")=="block"){
$(this).slideToggle("slow");
}
});

$(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
$(this).css("background-image",'url('+script_path+News_Images[0]+')');//
});

$(body + " > div > a[class='open_button']").each(function(){
$(this).css("background-image",'url('+script_path+News_Images[0]+')');//
});

if($(body + " > div > #"+box+id).css("display")=="none"){
$(body + " > div > #"+box+id).slideDown("slow");

$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
alert("box =" + box + " id = " + id + " link =" + link);
}
}


And here is the html sample

<div class="recent_news_box">
<a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
<a class="link_block" href="">Some Title Text</a>
<div style="display: none;" class="news_box" id="news_link3">
<img class="front_image" alt="" src="" align="right">
<span class="date">Jul 21, 2009</span>
<div>Some Stuff to display here will be short text</div>
</div>
</div>


Thanks in advance.

Is this jquery? If so, I'm going to be one of those dorks that says "Do this instead". Only because the existing code looks more complicated than necessary just for opening/closing and toggling an image. Here's what I just tossed together:

CSS - I didn't have images handy, but this should be close.
.open_button {width:1em;height:1em;/*background-color:red;*/ background-image:url(images/max.gif);display:block;}
.news_box {display:none;}
.itsOpen {/*background-color:green;*/ background-image:url(images/min.gif);}


HTML - test divs
<div class="recent_news_box">
<a id="open_button1" class="open_button"></a><a class="link_block" href="">1111111</a>
<div id="news_link1" class="news_box">
<span class="date">Jul 21, 2009</span>
<div>1111 Some Stuff to display here will be short text</div>
</div>
</div>
<div class="recent_news_box">
<a id="open_button2" class="open_button"></a><a class="link_block" href="">2222222</a>
<div id="news_link2" class="news_box">
<span class="date">Jul 21, 2009</span>
<div>2222 Some Stuff to display here will be short text</div>
</div>
</div>
<div class="recent_news_box">
<a id="open_button3" class="open_button"></a><a class="link_block" href="">3333333</a>
<div id="news_link3" class="news_box">
<span class="date">Jul 21, 2009</span>
<div>3333 Some Stuff to display here will be short text</div>
</div>
</div>


jQuery - inside the $(document).ready function, of course
$('.open_button').click(function(){
$(this).siblings('div').slideToggle('slow');
$(this).toggleClass('itsOpen');
});


The use of siblings() could probably be replaced by something else, but it works in this generic case.

Apologies if this is entirely in another direction than you want to go. It's certainly a simpler way to do what I think you want, anyway.

I'm not sure if i am using this properly.

I placed your jquery code inside the function


$(document).ready(function() {
$('.open_button').click(function(){
$(this).siblings('div').slideToggle('slow');
$(this).toggleClass('itsOpen');
});
});


It didn't seem to work so i'm not sure if i did something wrong? Thanks.

You can check with Firebug to see if you're getting any errors and maybe drop an alert in there to confirm it's actually entering the click() function.

I placed an alert box right after document ready and it never fired off. I apologize for my lack of javascript knowledge, but this is over my head.

You mean you did this?
$(document).ready(function() {
alert('hi!');
/* other stuff */
});

And it never alerted? If so, there's an error in somewhere in the javascript. Firebug will show where.