Select element by ID and CSS attribute

Question

Through CSS I set all divs to visibility :hidden. By clicking the item in the navbar I want the target div to be set to visibility :visible. This works just fine but I want to avoid setting it again if it is already visible.

This code doesn't work

function showNewElement(actID) {
   ID = actID.substring(1, actID.length);
   $('.mainDiv:visible').css("visibility", "hidden");
   $("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');
}

http://jsfiddle.net/dEnx5/

So I had to wrap it in an if-Statement

function showNewElement(actID) {
    var ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") != "visible") {
        $('.mainDiv').css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible").hide().fadeIn('fast');
    }
}

http://jsfiddle.net/qUe6k/4/

Why does it not work the other way?

Olaf Dietsche · Accepted Answer · 2013-12-02 08:27:30Z

2

From jQuery - :visible Selector

Elements are considered visible if they consume space in the document.
Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

So, although you cannot see the elements, they are not in the :visible set.

What you can do instead, is using display: none on the mainDiv elements. Then it will be considered invisible

.mainDiv {
    display: none;
}

and then change the jQuery to just

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    $('.mainDiv:visible').hide();
    $("#" + ID + ':hidden').fadeIn();
}

See modified JSFiddle

answered Dec 2, 2013 at 8:27

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codingrose · Accepted Answer · 2013-12-02 08:24:17Z

0

Write:

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") == "hidden"){
        $(".mainDiv:visible").css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible");
    }
}

Fiddle here.

answered Dec 2, 2013 at 8:24

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

1 Comment

theknut Over a year ago

I actually wanted to get the 2-liner to work because logically it seems right but it doesn't work. I want to understand why ;)

Hrvoje Golcic · Accepted Answer · 2013-12-02 08:34:16Z

0

It works if you change:

$("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');

To:

$("#" + ID).css("visibility", "visible").hide().fadeIn('fast');

answered Dec 2, 2013 at 8:34

Hrvoje Golcic

3,7161 gold badge35 silver badges37 bronze badges

Collectives™ on Stack Overflow

Select element by ID and CSS attribute

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related