Hide the FB Login button if user already logged in

Question

This seems like a simple problem and others have posted but the answer still eludes me. Specifically I have been through these two ( here and here ) SO questions repeatedly and I'm just not making the connection to my situation.

For me I thought I would wrap the login button in a div and then change the div visibility based upon login status. The div does indeed change visibilty but the fb login button remains visible???

Here is my code for wrapping the login button in the div:

....snip....
<div id="fblogin">
    <table align="center" style="text-align:center;">
        <tr>........</tr>
        <tr>
            <td>
                <div id="fb-root"></div>
                    <span id="fb-login">
                        <div
                            class="fb-login-button"
                            onlogin="afterFbLogin()"
                            data-show-faces="false"
                            data-width="200"
                            data-max-rows="1"
                            data-scope="publish_stream">
                        </div>
                    </span>
............snip.............

here is my FB.Init and checking for logged in status:

window.fbAsyncInit = function () {
    FB.init({
        appId: '352810974851050',        // App ID
        channelUrl: '//www.domain.com/channel.html',
        status: true, // check login status
        cookie: true, // enable cookies 
        xfbml: true // parse page for xfbml or html5 like login button below
    });

    // Put additional init code here
    FB.getLoginStatus(function (response) {

        if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            ShowFbLogin(false);
        } else if (response.status === 'not_authorized')
.........snip...................

and the js code for the ShowFbLogin function

        function ShowFbLogin(ShowLogin)
        {
            var div_FBLogin = document.getElementById('fblogin');
            var spn_FBLogin = document.getElementById('fb-login');
            var div_FBShare = document.getElementById('fbshare');

            if (ShowLogin)
            {
                div_FBLogin.style.visibility = 'visible';
                div_FBShare.style.visibility = 'hidden';
            }
            else
            {
                div_FBLogin.style.visibility = 'collapse';
                spn_FBLogin.style.visibility = 'collapse';
                div_FBShare.style.visibility = 'visible';
            }
        }

Answer 1

Try instead using display: none for the #fb-login element. visibility: collapse is for table elements; should act like visibility hidden, that is, reserve space for the invisible button. visibility: collapse also doesn't work for IE8 at all.