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


Tags: jquery,css,show-hide

Problem :

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



Solution :

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

    CSS Howto..

    How to structure css using BEM methodology for adaptive web pages?

    How can I use jQuery to hide or show table rows based on asp.net role?

    How to set ul width in percent?

    how could I make a textarea dynamically resize with the chrome app window?

    How to apply different css style for IE 10 and 11 only?

    How to make an iFrame window scrolls with overflow:hidden?

    How to make specific checkbox items bold (not all) via CSS?

    How to make background image on hover have a transition effect without default background image?

    How to customize the EditorFor CSS with razor

    How to make a jQuery step animation?

    How to set size of font with CSS without using - hyphen?

    How to get margin to be relative to text amount css

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How do I change properties of text that's being imported via php

    How do I move that div with CSS in a clean way?

    How to hide label on radio checked using css

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to show a region on a image with CSS

    CSS flex, how to display one item on first line and two on the next line

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to force a list to be vertical using html css

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How to change select element's background color when it's selected?

    How to solve this HTML/CSS bug? [closed]

    How to make divs float on both ends of another div?

    How to create multi-column data entry form using CSS in Asp.Net?

    In CSS, how to select a particular tag under mutiple ids?

    CSS How to Make Image Display outside of div

    How to use box shadow in css?

    How to stack smaller text in CSS?