JQuery slideToggle replace image src

Question

Hi, This function is called when an up/down arrow is clicked to slide hidden div. If the div is hidden, the arrow points down and changes to up when the div is shown. If the div is shown, the arrow points up to hide div and changes to down when the div is closed. I just wanted to know if there was a more efficient way of doing this or if this is the correct way. Thanks.

  function showInfo(info_id) {
    var img_id = '#arrow_'+info_id;
    var div = '#info_'+appointment_id;
    $(div).slideToggle('normal',function() {
        if ($(this).is(':visible')) {
            $(img_id).attr('src',$(img_id).attr('src').replace('_down','_up'));
        }
        else {
            $(img_id).attr('src',$(img_id).attr('src').replace('_up','_down'));
        }
    });}

Answer 1

First off, what you have is perfectly correct. If you wanted to shorten it a bit though (seems you might from the question) and you're on jQuery 1.4+ you can pass a function to .attr(), like this:

function showInfo(info_id) {
  $('#info_'+appointment_id).slideToggle('normal',function() {
    $('#arrow_'+info_id).attr('src', function(i, src) {
      return $(this).is(':visible') ? src.replace('_down','_up')
                                    : src.replace('_up','_down');
    });
  });
}

The format is .attr('attributeToChange, function(index, currentVal) {}), so you can use the current value in your function in a pretty clean way.