Check div visibility not display in jQuery

Question

I've been trying everything and reading everywhere and can't seem to get this to work. What the heck am I doing wrong...

var visibility = $('#short-link').css('visibility');
$('#share-link span').click(function() {
    if (visibility != 'hidden'){
        $('#short-link').css({visibility: 'visible'});
    } else {
        $('#short-link').css({visibility: 'hidden'})
    }
});

Please help

Have you seent this question?http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery — Simon C, Mar 06 '13 at 01:00
don't you need to have like this `$('#short-link').css({'visibility': 'visible'});`?single quotes on visibility. — SRy, Mar 06 '13 at 01:04

score 2 · Accepted Answer · answered Mar 06 '13 at 01:00

I imagine this isn't behaving as you expect because you're defining visibility outside your function, so it never changes. I think you intended to write:

$('#share-link span').click(function() {
    var visibility = $('#short-link').css('visibility');
    if (visibility != 'hidden'){
        $('#short-link').css({visibility: 'visible'});
    } else {
        $('#short-link').css({visibility: 'hidden'})
    }
});

or better, cache the object but not the property:

var $shortLink = $('#short-link');
$('#share-link span').click(function() {
    var visibility = $shortLink.css('visibility');
    if (visibility != 'hidden'){
        $shortLink.css({visibility: 'visible'});
    } else {
        $shortLink.css({visibility: 'hidden'})
    }
});

Thanks, don't why I didin't catch that. – souporserious Mar 06 '13 at 04:09 — souporserious, Mar 06 '13 at 04:09

David says reinstate Monica · Answer 2 · 2013-03-06T10:30:49.247

I'd suggest:

$('#share-link span').click(function() {
    this.style.visibility = this.style.visibility == 'visible' ? 'hidden' : 'visible';
});

This avoids using jQuery methods to update the inline style of the node, and avoids setting a needless variable (which then has to be updated as the visibility changes).

This seems way better from what your saying, I haven't messed around with pure JS yet, just jQuery. So instead of "this", wouldn't I use #short-link? Do I make it a javascript object?

If you'd rather stay with a more jQuery approach then I'd suggest:

$('#share-link span').click(function() {
    $(this).css('visibility', function(i,v){
        return v == 'visible' ? 'hidden' : 'visible';
    });
});

Assuming, of course, that it's the span you wish to act on.

This seems way better from what your saying, I haven't messed around with pure JS yet, just jQuery. So instead of "this", wouldn't I use #short-link? Do I make it a javascript object? Appreciate your help. — souporserious, Mar 06 '13 at 04:11

score 0 · Answer 3 · answered Mar 06 '13 at 01:02

You're checking the visibility outside of the event handler, so it won't really change by itself.

In addition to Dave's answer, if you just want to toggle the visibility of the element, .toggle might work:

$('#share-link span').click(function() {
    $('#short-link').toggle();
});

The difference between your approach and this one is that .toggle() toggles between display: none and your original display value instead of changing the visibility property.

score 0 · Answer 4 · answered Mar 06 '13 at 01:10

0

I guess you are missing quotes on visiblity

$('#short-link').css('visibility','visible');

or

 $('#short-link').css({'visibility':'visible'});

answered Mar 06 '13 at 01:10

SRy

2,743
7
33
54

You missed the {}. Also while you're right that this can cause issues on some browsers (older IE versions, I believe), I don't think it's the problem here. – Dave Mar 06 '13 at 01:12
my mistake; just checked the docs and your version is fine. I still don't think it's the issue though! – Dave Mar 06 '13 at 01:13
I am not sure what is the mistake. But I caught quotes thing when i saw the code.If We see the `HTML` of those `ID`s OP used in the script we can tell. – SRy Mar 06 '13 at 01:26

Check div visibility not display in jQuery

4 Answers4