Show and hide functions don't work when there are !important styles

[lihanli]

​http://jsfiddle.net/UuNc8/

[Rick Waldron]

Of course it doesn't, that's how "!important" works ​http://gyazo.com/ecf82b34f7e3e4a868ede58cb2979e4e

[gkertai]

We've come across this same issue in our app, where we use the flex-box model extensively. Flex-box requires us to define display: box !important rules to make sure that lower priority display rules don't mess up the layout.

We're also using sortable and draggable from jQueryUI, which in turn uses jQuery.hide() to temporarily hide dragged elements, so we had to patch the jQuery.hide() function to use "display: none !important" for this (see code snippet below).

Do you see any potential problems with adding the fix to the codebase? Do you think it can hurt many users relying on this ​undocumented side-effect?

	// Set the display of most of the elements in a second loop
	// to avoid the constant reflow
	for ( index = 0; index < length; index++ ) {
		elem = elements[ index ];
		if ( !elem.style ) {
			continue;
		}
		if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
			// fix for hiding "display: xxx !important" elements
			if ( show ) {
				elem.style.removeProperty( "display" );
				if ( values[ index ] ) {
					elem.style.setProperty( "display", values[ index ] );
				}
			} else {
				elem.style.setProperty( "display", "none", "important" );
			}
		}
	}

Cheers, Gabor

[dmethvin]

The best thing to do is not use .show() or .hide() at all. There are too many special cases to consider in order to get it right, and no amount of code will end up doing the expected thing. Just use a class name and .addClass() or .removeClass().