Divs are not filtered as: hidden when displayed: none; added as a style

Question

I have 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 switch between displaying them, but I need to save as the cookie that was used the last time the user was logged in (i.e. which one was visible). Saving a cookie is not a problem.

The problem is that for some reason I can’t determine which one is hidden using .is (": hidden") and couldn’t determine which one is visible using .is (": visible")

When I use these two selectors, I always get both. "true" and "true" for both, while one has a mapping: none; and the other is not. Note that they DO NOT fit inside a hidden container that would otherwise hide both, so there are no hidden ancestor containers.

Can someone explain why this could happen?

JQuery code containing the source to get the identifier and to get the selected (which is currently 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

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

<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 happens in partial views?

Answer 2

:hidden for CSS property visibility:hidden

I think...