CODEWITHSUNDEEP
jquerycss
ozil
ozil

Reputation: 7117

Setting 'visibility: visible' is not working

Why is my $('#myDiv').css('visibility', 'visible'); not working?

$('#clickdiv').click(function() {
    alert($('#myDiv').css('visibility'));
    if ($('#myDiv').css('visibility') == 'hidden') {
        $('#myDiv').css('visibility', 'visible');
    }

    if ($('#myDiv').css('visibility') == 'visible') {
        $('#myDiv').css('visibility', 'hidden');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="myDiv">hide/show</div>
<div id="clickdiv">click me</div>

Upvotes: 2

Views: 4670

Answers (4)

Saty
Saty

Reputation: 22532

Use is(':visible') to check visibility of div

$('#clickdiv').click(function () {

        if ($('#myDiv').is(':visible')) {
            $('#myDiv').css('visibility', 'hidden');
        }
        else {
            $('#myDiv').css('visibility', 'visible');
        }
    });

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Change your code to 

$('#clickdiv').click(function(){
    alert($('#myDiv').css('visibility'));

    var visiblity = $('#myDiv').css('visibility');
    $('#myDiv')
       .css('visibility', visiblity == "visible" ? "hidden" : "visible");
});

fiddle

Upvotes: 1

nyumerics
nyumerics

Reputation: 6547

Change the second if to else if!

$('#clickdiv').click(function(){
    alert($('#myDiv').css('visibility'));
    if($('#myDiv').css('visibility') == 'hidden'){
       $('#myDiv').css('visibility', 'visible');
    }
    else if($('#myDiv').css('visibility') == 'visible'){
        $('#myDiv').css('visibility', 'hidden');
    }
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic is flawed. You have two separate if conditions. The second will always fire when showing the div again. You need to combine to an if/else statement:

$('#clickdiv').click(function () {
    alert($('#myDiv').css('visibility'));
    if ($('#myDiv').css('visibility') == 'hidden') {
        $('#myDiv').css('visibility', 'visible');
    }
    else {
        $('#myDiv').css('visibility', 'hidden');
    }
});

Note that you can improve the logic too using a ternary:

$('#clickdiv').click(function () {
    $('#myDiv').css('visibility', function(i, v) {
        return v == 'hidden' ? 'visible' : 'hidden';
    });
});

Example fiddle

You could even make it shorter by using toggle(), although that sets the display property not visibility, so may not meet your needs exactly.

Upvotes: 4

Related Questions