jquery toggle change image regarding status -

i'm using jquery toggle hide content, user can "unfold" if he/she wants see it. here's jsfiddle of it:

http://jsfiddle.net/yjs2p/

using code:

$.noconflict(); function togglediv(divid) {    jquery("#"+divid).toggle($); } 

as can see first element opened "close"-image (red), 2 other elements "closed" "open"-images (orange).

now want achieve if user clicks on 1 of images, toggle-elements closed , click-related element gets opened. when element opened image should change other state, if it's closed (orange) image should changed open (red) , other way round, too.

can provide me hints issue?

cheers in advance!

ok how - first lets make few changes html.

lets not use id's instead mindset of referencing class name. each of content div's added news-content class

... <div class="news-content" id="mycontent"> ... <div class="news-content" id="mycontent2"> ... <div class="news-content" id="mycontent3"> ... 

next lets remove click handler hyperlinks href attribute (we'll add handler in minute jquery)

<a class="toggle" href="#"> 

removed css , made sure news-content hidden default

.news-content {     display: none; } 

jquery

with changes inplace, lets write click handler hyperlinks performs toggle. note: used slideup , slidedown instead of toggle.

click here fiddle

$(document).ready(function () {      $('a.toggle').click(function () {          // select out elements clicked item         var $this = $(this),             $root = $this.closest('.news-text'),             $content = $root.find('.news-content'),             $toggleimage = $this.find('img');          // collapse items except clicked 1         $('.news-text').each(function () {             var $itemroot = $(this);             if ($itemroot == $root) return; // ignore current             var $itemcontent = $itemroot.find('.news-content');             if ($itemcontent.is(':hidden')) return; // ignore hidden items              // collapse , set img             $itemcontent.slideup();              $itemroot.find('.toggle > img').attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');         });          // current clicked item either show or hide         if ($content.is(':visible')) {             $content.slideup();             $toggleimage.attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');         } else {             $content.slidedown();             $toggleimage.attr('src', 'http://www.70hundert.de/images/toggle-close.jpg');         }          // stop postback         return false;     }); }); 

updated - new version of jquery handler

click here fiddle

$('a.toggle').click(function () {      var openimgurl = 'http://www.70hundert.de/images/toggle-open.jpg',         closeimgurl = 'http://www.70hundert.de/images/toggle-close.jpg';      var $newsitem = $(this).closest('.news-text'),         $newscontent = $newsitem.find('.news-content'),         iscontentvisible = ($newscontent.is(':visible'));      // slide shown news-items - expected 1 visible @ time     $('.news-text').find('.news-content').slideup(function () {          // on animation callback change img         $('.news-text').find('.toggle > img').attr('src', openimgurl);     });      if (!iscontentvisible) { // if new-item hidden when clicked, show it!         $newscontent.slidedown(function () {             // on animation callback change img             $newsitem.find('.toggle > img').attr('src', closeimgurl);         });     }      return false; // stop postback });