title: toggle image src
body: <p>Need to change image back ground when click on HREF with other function </p>
  
  <pre><code>&lt;a href="#" id="showbilled_account"&gt;
      &lt;img alt="" src="images/btn_showBillAccounts.gif" id="showBillAccounts" /&gt;
  &lt;/a&gt; 
  </code></pre>
  
  <p>there some other toggles are Woking with same button. All the functions are working fine.
  unfortunately I have to click twice to change image src </p>
  
  <p>Here is my script code </p>
  
  <pre><code>$(document).ready(function() {
          var valueTextbox = $("#FilterTextBox").val();
          $('#tbl_container tbody tr:not(:contains("' + valueTextbox + '"))').hide();
          $('#tbl_container tbody tr:contains("' + valueTextbox + '")').show();
          $(".pagination").hide();
          $(".searchresult.spacetop").hide();
          $(".exp_coll_wrap_alone").hide();
  
      $("#showbilled_account").click(function() { 
          var valueTextbox = $("#FilterTextBox").val();
          $('#tbl_container tbody tr:contains("' + valueTextbox + '")').toggle();
          $('#tbl_container tbody tr:contains("")').toggle(); 
          $(".pagination").toggle();
          $(".exp_coll_wrap_alone").toggle();
  
          $(function(){
              $('#showbilled_account').toggle(function(){
               $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
              },function(){
                $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
              });
          });
   });
  
  });
  </code></pre>
  
  <p>thanks in advance </p>