Question

I use jQuery 1.7.2 and UI 1.8.21 with tabs plugin.

I have three tabs and each tab got a table with span with I want to hide/show based on value of some javascript variables.

It works ok on the first tab but second and third doesn’t. I used the same function to toggle on/off the span.

I am not able to reproduce this issue on jsfiddle. It works ok.

function toggle_svn_user(codebase){

    if (codebase=="trunk" && user==trunk_svn_user){
        $('#'+codebase+"_svn_user").hide();
        $('#'+codebase+"_svn_relocate_cmd").hide();

        //$('#'+codebase+"_svn_user").css('display', 'none');
        console.log("hide "+codebase);
        console.log($('#'+codebase+"_svn_relocate_cmd").attr('style'));
    }else{
        $('#'+codebase+"_svn_user").show();
        $('#'+codebase+"_svn_relocate_cmd").show();
    }
 }

there are two more if blocks for the other two tabs. This works for ‘branch’ codebase. So I started to debug it with ‘trunk’ codebase.

toggle_svn_user() function runs in $(document).ready(function(){ block. I also added button to trigger the function any time. This gives me the same result. What is strange that console.log() shows display: none; but when I use firebug to see the html I can see display: inline;. I can click the button and console.log and html doesn’t match.

I tried to use jQuery’s .hide(), .css('display', 'none'); and also .css('display', 'none !important'); Nothing helped. I tried to use my application with tabs with the same result.

Any idea how to fix that? Or how to show/hide the span?

<span class="" id="trunk_svn_user">svn user:<span id="trunk_svn_user_value"></span></span>';

Answer 1

My guess is that one of the other if blocks might be interfering – does it work if you comment out the other cases?

On a side note you can use jQuery’s toggle method to simplify your code.
See the third usage .toggle( showOrHide ) on this page: http://api.jquery.com/toggle/

Here is an example:

function toggle_svn_user(codebase){

    if (codebase=="trunk"){
        var showUser = (user == trunk_svn_user)

        $('#'+codebase+"_svn_user").toggle(showUser);
        $('#'+codebase+"_svn_relocate_cmd").toggle(showUser);

        console.log($('#'+codebase+"_svn_relocate_cmd").attr('style'));
    }
}