Ocultando e mostrando conteúdo com CSS: um truque sem JavaScript

Ao trabalhar com desenvolvimento web, controlar a visibilidade do conteúdo geralmente é essencial. Tradicionalmente, isso é conseguido usando JavaScript, mas CSS também pode ser usado para criar efeitos elegantes de ocultação e exibição. Uma dessas técnicas é descrita abaixo, abordando um desafio específico encontrado em abordagens anteriores.

Hide/Show Content Toggle:

Pode-se empregar CSS para criar uma alternância de conteúdo que permite aos usuários ocultar e mostrar uma lista de itens. O snippet a seguir demonstra essa funcionalidade:

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

O desafio:

Embora o CSS acima atinja o efeito desejado, ele enfrenta uma desvantagem. Quando o conteúdo é exibido, ele pode ser ocultado simplesmente clicando em qualquer lugar da página. Esse comportamento é indesejável, pois só queremos que o conteúdo seja oculto quando o link "Ocultar" for clicado.

Solução:

Para resolver esse problema, faça o seguinte Código CSS e HTML revisado podem ser usados:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

Com essas alterações, a mensagem de alerta só será ocultada quando o elemento span "Hide Me" for clicado. Esta solução resolve efetivamente o problema e fornece um método baseado em CSS para ocultar e mostrar conteúdo sem depender de JavaScript.