jQuery hide and show toggle div with plus and minus icon

Question

I have the code working for the show and hide the div. How would I add two different icons as a sprite image for when the show and hide are active?

For

Answer 1

HTML:

  
General Theme Settings
  

    

      

        

          
Back-Ground Color
        
        

          
        
      
      

        

          
Text Color
        
        

          
        
      
    
  



  
Content Theme Settings
  

    

      

        

          
Back-Ground Color
        
        

          
        
      
      

        

          
Text Color
        
        

          
        
      
    
  

JavaScript:

$(document).ready(function() {

  $(".options").hide();
  $(".SettingsTitle").click(function(e) {
    var appThemePath = $("#appThemePath").text();

    var closeMenuImg = appThemePath + '/images/toggle-collapse-light.gif';
    var openMenuImg = appThemePath + '/images/toggle-collapse-dark.gif';

    var elem = $(this).next('.options');
    $('.options').not(elem).hide('fast');
    $('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
    elem.toggle('fast');
    var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
    $(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
  });

});