Div's are not filtered as :hidden when display:none; is appended as style

Question

Hey folks

I have some simple HTML:

<div id="selectorContainer">
    <div id="chainedSelector" style="display: none;"><% Html.RenderPartial("ProjectSuggest/ChainedProjectSelector"); %></div>
    <div id="suggestSelector"><% Html.RenderPartial("ProjectSuggest/SuggestControl", new SuggestModeDTO{RegistrationMode = Model.RegistrationMode}); %></div>
</div>

which is two containers for controls. I have jQuery code to toggle between displaying these, but I need to store as a cookie which one was used last time the user was logged in (i.e. which one was visible). The storing of the cookie is not the problem.

The problem is that I for some reason am not able to detect which one is the hidden one, using .is(":hidden"), and not able to detect which one is visible using .is(":visible")

When I use those two selectors, I always get both. "true" and "true" for both, eventhough one has display: none; and the other doesn't. Please note that they are NOT placed inside a hidden container which otherwise would hide both, so there are not any hidden ancestor containers.

Can anyone maybe explain why this could happen?

jQuery code containing source for getting the Id's and for getting the selected one (which currently is broken):

getChainedSelectorId: function() {
    return "#chainedSelector";
},

getSuggestSelectorId: function() {
    return "#suggestSelector";
},

getSelectedSelector: function() {
    alert($(this.getChainedSelectorId()).is(":hidden"));
    alert($(this.getSuggestSelectorId()).is(":hidden"));
    var selected = ($(this.getChainedSelectorId()).is(":visible") ? this.getChainedSelectorId() : this.getSuggestSelectorId());
    alert(selected);
    return selected;
},

Thanks in advance.

Answer 1

:hidden is for the CSS property visibility:hidden

I think...

Answer 2

I just ran the following code with the above html and it works perfectly:

<script type="text/javascript">
testobj = {
getChainedSelectorId: function() {
    return "#chainedSelector";
},

getSuggestSelectorId: function() {
    return "#suggestSelector";
},

getSelectedSelector: function(){
alert($(this.getChainedSelectorId()).is(":hidden"));
    alert($(this.getSuggestSelectorId()).is(":hidden"));
    var selected = ($(this.getChainedSelectorId()).is(":visible") ? this.getChainedSelectorId() : this.getSuggestSelectorId());
    alert(selected);
    return selected;    
    }
}
$(function() {
    testobj.getSelectedSelector();
});


</script>

What is getting rendered in the partial views?