Question

I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn’t work when I do it with jquery/javascript.

Here is the HTML code:

<a href="javascript:connShow();" id="connTab" style="display:none; text-decoration:none;"></a>
<div id="connWindow">Conn Window
    <div id="closeButton" onclick="javascript:connHide();"></div>
</div>

Here is the jquery code:

function connHide()
{
    $('#connTab').show();
    $('#connWindow').hide();
}

function connShow()
{
    $('#connWindow').show();
    $('#connTab').hide();
}

Any help will be greatly appreciated!

Answer 1

The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.

Hide the anchor programmatically instead:

HTML:

<a href="#" id="connTab" style="text-decoration:none;"></a>
<div id="connWindow">
    Conn Window
    <div id="closeButton"></div>
</div>

Script:

$(function() { // on document load
    $('#connTab').css('display', 'none');

    // I'm going to replace your inline JS with event handlers here:
    $('#connTab').click(function() { connShow(); return false; });
    $('#closeButton').click(function() { connHide(); });
});

function connHide() {
    $('#connTab').css('display', '');
    $('#connWindow').css('display', 'none');
}

function connShow() {
    $('#connWindow').css('display', '');
    $('#connTab').css('display', 'none');
}

Hope that helps.