Jquery anchor tag display problem

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

Why not bind your click events in jQuery as well

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

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

$(document).ready(function () {
    $("#contab").click(function () { 
       connShow(); 
       return false;
    });
    $("#connWindow").click(function() { 
       connHide();
    });
});

Answer 2

You don't need to state javascript: for onclick events. Try changing to:

<div id="closeButton" onclick="connHide();"></div>

I would also change the first line to the following:

<a href="#" onclick="connShow(); return false;" id="connTab" style="display:none; text-decoration:none;"></a>

Answer 3

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.