Question

I have a case where I need to toggle the visibility of an element based on whether a particular operation (categorization) is in progress if so, it’s hidden, else it’s visible.

Now I have css which looks like this:

.isCategorizing .category.all {
   display:none;
}

i.e., it means that that div with class(es) .category.all should be hidden if it’s parent(s) have the class .isCategorizing

Now in jquery if I toggle the visibility of the .category.all element an inline style is added to the HTML taking precedence over the CSS in the .css file!! So even if the above is true the visibility value from the inline style seems to take precedence and the element is NOT hidden. On being visible jquery add’s style=display:list-item; to the div whereas my CSS should make it hidden…

I could handle this in pure jQuery but there are too many states and checks to make sure that it should work in that particular manner as well as maintain a boolean flag to “remember” if that state existed and whether to revert to that state ever. The CSS approach is simpler and much cleaner, but the inline style is the irritating bit…

…how best to deal with this? I tried creating another class .hide and toggled that with jquery. Seems to work but for some reason screws up the positioning of my element. I’m playing with it but can’t seem to find a clean solution to this problem. Any advice??

Update:

Here is the corresponding CSS:

.category{
        position:relative;
        padding:1px;
        margin:2px 0 5px 0;
        clear:both;
        font-family:arial, sans-serif;
        font-size: 14px;
        display:inline-block;
        width:inherit;
    }   


.category.all {
        display:none;
        width:200px;
        text-align: center;
        padding:3px;
        border:2px solid transparent;
        border-radius: 4px;
        background-color: #DDDFE3;
    }

NOTE: A simple toggleClass doesn’t work in this case – toggling “all” would cause the button to be visible even when it shouldn’t be. Second, I’m inheriting a few props from the .category class since this button is displayed at the end of the ‘category list’ so to speak and wanted to prevent duplication.

If I go with toggleClass and just duplicate the props it may work, on second thought…lemme try this and post an update

Answer 1

After all the clarifications it seems that:

• If the button has .all, you want it to be hidden (irrespective of whether the parent has .isCategorizing)
• If the button does not have .all, you want it to be hidden if and only if the parent has isCategorizing

If this is the case, the simplest is to reverse the meaning of the all class and use a class partial in its place. You can then do:

.category {
    display: none;
}

.category.partial {
    display: inline-block;
}

.isCategorizing .category.partial {
    display: none;
}

If scrapping .all would introduce problems in other code you do not show here, you can keep using it and also introduce .partial (in which case I would prefer it be named .not-all so that the relation is more apparent to maintainers). You can do this by:

1. Adding toggleClass('.not-all') to the one or two places where you already have toggleClass('.all'), and
2. Moving the display CSS style setters inside new selectors which will be triggered by the new not-all class