Le CSS a quelques facéties contre lesquelles il faut parfois lutter pour en venir à bout.

Imaginez que vous avez un élément HTML que vous souhaitez masquer au lancement de la page mais que vous devez pouvoir afficher par la suite en JavaScript, par exemple avec la fonction show() de jQuery.

Si vous le déclarez masqué par une classe CSS ou un autre sélecteur, show() sera dans l’incapacité de savoir quelle la bonne valeur de la propriété « display » qu’il devrait utiliser alors il choisit « block » par défaut.

Vous pouvez en voir un exemple sur ce JS Fiddle : https://jsfiddle.net/Loenix34/tLc30ws0/4/

Pour remédier à cela, nous devons déclarer directement dans le HTML que cet élément est masqué en utilisant du style inline pour définir display: none; , ainsi show() va détecter que cet élément est masqué inline et il va simplement supprimer cette valeur.

Vous pouvez voir un exemple fonctionnel sur ce JS Fiddle : https://jsfiddle.net/Loenix34/nk7sw0uk/4/

On respecte ainsi le mécanisme du hide() de jQuery qui ajoute cette propriété inline, elle a donc un effet que sur cet élément et en l’effaçant, on revient à la valeur d’affichage.

Solution hidden

Il est maintenant également possible d’utiliser la propriété hidden si vous souhaitez cacher / masquer un élément en pur JavaScript.

Cette propriété est surchargée par la moindre propriété CSS display présente.