Em quase todos os projetos em que trabalhei antes, costumava ter uma classe auxiliar CSS ‘.hidden’ para ocultar os elementos que você pode precisar exibir posteriormente. Algo como:
.hidden{
display: none;
}
Hoje eu aprendi que você pode usar o atributo HTML ‘oculto’ para ocultar seus elementos HTML.
<p hidden="hidden">This is a hidden paragraph.</p>
Acredito que esta seja uma solução mais semântica, construída especificamente para este problema. Com o seguinte polyfill CSS, ele funcionará com o Internet Explorer até a versão IE7.
[hidden]
display: none