Открытие / закрытие иконок

Я проделываю некоторые махинации с jQuery, чтобы поставить маленькие значки плюса / минуса рядом с моими расширителями. Это похоже на файловые деревья Windows или расширители кода firebugs.

Это работает, но недостаточно конкретно.

Надеюсь, в этом есть смысл ...

$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
  event.preventDefault();
  $(this).next('div').slideToggle(200);//find the next div and sliiiide it
  $('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
  event.preventDefault();
  $(this).next('div').slideToggle(200);
  $('img.expander').attr('src','img/content/info-open.gif');
});


<ul class = "product-info">
  <li>
    <a class = "img-link" href = "#"><img class = "expander" src = "img/content/info-open.gif" alt = "Click to exand this section" /> <span>How it compares to the other options</span>
  </a>
  <div class = "toggle"><p>Content viewable when expanded!</p></div>
  </li>
</ul>

На странице есть множество тегов $('img.expander'), но я должен быть конкретным. Я пробовал функциональность next () (например, я использовал для поиска следующего div), но он говорит, что его undefined. Как я могу найти свой конкретный тег img.expander? Спасибо.

ИЗМЕНИТЬ, обновленный код в соответствии с решением Дугласа:

$('div.toggle').hide();
            $('ul.product-info li a').toggle(function(event){
                //$('#faq-copy .answer').hide();
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-close.gif');
                //alert('on');
            },function(event) { // same here
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-open.gif');
            });