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!

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!

• javascript
• jquery
• html

• 1 "javascript:" URIs are bad - jibbering./faq/#javascriptURI. They're also only relevant in href properties, not in onclick. – Lightness Races in Orbit Commented Mar 9, 2011 at 17:19
• you are missing the point of jQuery revolution lol :) you shouldn't use onclick attr or href="javascript:..." as this can be done with jQuery and better managed. – Val Commented Mar 9, 2011 at 17:21

3 Answers 3

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

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.

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>