Preventing jquery's show/hide from adding inline style?

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

Can you not use toggleClass? el.toggleClass("category"). api.jquery.com/toggleClass — Paul Grime
– Paul Grime, Commented Sep 11, 2011 at 18:27
@Paul: Not directly...the .category.all inherits some of its properties from the .category class the .all class is just a button that shows "view all" when you are selectively viewing data. Just toggling .category won't work since they are just a bunch of inherited props — PhD
– PhD, Commented Sep 11, 2011 at 18:33

Jon · Accepted Answer · 2011-09-12 00:24:48Z

2

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:

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

edited Sep 12, 2011 at 0:24

answered Sep 11, 2011 at 19:22

Jon

439k85 gold badges756 silver badges820 bronze badges

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

4 Comments

PhD Over a year ago

The .all class is toggled independently of the isCategorizing class I want conditional toggling...i.e., if isCategorizing then visibility of .category.all should be hidden irrespective of its original visibility before...

Jon Over a year ago

@Nupul: Please explain what's going on some more. Which are the classes you toggle, and what do you want to happen for each combination of toggled states?

PhD Over a year ago

I have a button .all that is responsible for a 'view all' operation. This button should be hidden when .isCategorizing class is applied. This button is visible when a user selects a particular 'category' for viewing - it's only given to him/her as a convenience to 'view all posts' when seeing a partial set. However, if a "categorization" operation is in process, this button needs to be hidden (irrespective of whether it was originally hidden or not). Once the categorization is over the button may be visible if the user was previously viewing a partial set i.e,. a category...

Jon Over a year ago

@Nupul: OK, I think I got it; see the updated answer. But it would have been better if you provided this information clearly in the question text.

Collectives™ on Stack Overflow

Preventing jquery's show/hide from adding inline style?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related