Ocultar y mostrar contenido con CSS: un truco sin JavaScript

Cuando se trabaja con desarrollo web, controlar la visibilidad del contenido suele ser esencial. Tradicionalmente, esto se logra usando JavaScript, pero CSS también se puede usar para crear elegantes efectos de ocultación y visualización. Una de esas técnicas se describe a continuación y aborda un desafío específico encontrado con enfoques anteriores.

Ocultar/Mostrar alternancia de contenido:

Se puede emplear CSS para crear una alternancia de contenido que permite a los usuarios ocultar y mostrar una lista de elementos. El siguiente fragmento demuestra esta funcionalidad:

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

El desafío:

Si bien el CSS anterior logra el efecto deseado, enfrenta un inconveniente. Cuando se muestra el contenido, se puede ocultar simplemente haciendo clic en cualquier lugar de la página. Este comportamiento no es deseable, ya que solo queremos que el contenido se oculte cuando se hace clic en el enlace "Ocultar".

Solución:

Para solucionar este problema, lo siguiente Se puede utilizar código CSS y HTML revisado:

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

Con estos cambios, el mensaje de alerta solo se ocultará cuando se haga clic en el elemento span "Escóndeme". Esta solución resuelve eficazmente el problema y proporciona un método basado en CSS para ocultar y mostrar contenido sin depender de JavaScript.