toggle image src

Question

Need to change image back ground when click on HREF with other function

<a href="#" id="showbilled_account">
    <img alt="" src="images/btn_showBillAccounts.gif" id="showBillAccounts" />
</a> 

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

Here is my script 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" );
            });
        });
 });

});

thanks in advance

Answer 1

You can use if statement

if( $("#showBillAccounts").attr("src") == "images/btn_hideBillingAccounts.gif" ) {
  $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
} else {
$('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
} });

like this

$(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();

        if( $("#showBillAccounts").attr("src") == "images/btn_hideBillingAccounts.gif" ) {
            $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
        } else {
            $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
        } });

});

Answer 2

I'd prefer using background-images for the element and toggle the class on click:

<a href="#" id="showbilled_account" class="showBillingAccounts"></a>

Note that I have removed the img tag, and the anchor essentially have no content. By specifying height and width for the a, you'll have a button.

$('#showbilled_account').click(function(){
  toggleClass('showBillingAccounts', 'hideBillingAccounts');
}

CSS:

.showBillingAccounts{ background-image : url("images/btn_showBillAccounts.gif"); }
.hideBillingAccounts{ background-image : url("images/btn_hideBillAccounts.gif"); }
#showbilled_account{ height: 100px; width: 100px; padding: 0 }

This way you keep the HTML more semantically correct and it becomes more maintainable. Note that the size of the #showbilled_account item should fit the size of the image.

Answer 3

You can do this way too, by changing from this

$(function(){
   $('#showbilled_account').toggle(function(){
     $('#showBillAccounts').attr("src","images/btn_hideBillingAccounts.gif" );
   },function(){
        $('#showBillAccounts').attr("src", "images/btn_showBillAccounts.gif" );
     });
});

to this

      var mSrc = ($(#showBillAccounts).attr("src") === "images/btn_hideBillingAccounts.gif") ? "images/btn_showBillAccounts.gif" : "images/btn_hideBillingAccounts.gif";
      $(#showBillAccounts).attr("src", mSrc);