CODEWITHSUNDEEP
javascriptjqueryhtml
ashvagan
ashvagan

Reputation: 43

Jquery anchor tag display problem

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!

Upvotes: 0

Views: 4738

Answers (3)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385144

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.

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86872

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

Upvotes: 4

Curtis
Curtis

Reputation: 103358

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>

Upvotes: 1

Related Questions