Mostar y ocultar partes de un artículo con puro Css

Una forma sencilla para que el usuario pueda expandir y colapsar información complementaria en un artículo, realizada en puro Css sin añadir elementos y con sólo 2 reglas.

Mostar y ocultar partes de un artículo con puro Css

Por Kseso ✎ 2

Expandir y colapsar información dentro de un artículo con puro CssOfrecer la opción al usuario de desplegar y plegar información "complementaria" dentro de un artículo es un recurso muy utilizado en multitud de páginas. En la mayoría de las ocasiones se recurre a javascript, o lo que es peor, al uso de alguna de sus librerías para que el visitante interesado en dicha información pueda verla u ocultarla a voluntad.

Pero lo cierto es que no se necesita. Si deseas puedes lograrlo con puro Css. Sólo son necesarias dos reglas con un par de declaraciones sin necesidad de añadir elementos extras en la página.

El Html

Muy sencillo. Más es imposible. Sólo necesitamos un elemento contenedor de todo lo que queramos desplegar. En el ejemplo un <div class="extender">, un "abrir" complementado con un "cerrar":

<a class="ver" href="#more">Ver</a> <div class="extender"> <a href="#more:after">Cerrar</a> Contenido oculto y mostrado a voluntad del usuario <a href="#more:after">Cerrar</a> Para poder plegarlo sin tener que subir </div>

Como ves, la opción de abrir y cerrar son enlaces, esto es, anclas o navegación interna en la página. Y como estoy en blogger, elegí como destino del que muestra la información oculta un elemento ya existente en el cuerpo del post, el <!--more-->. Si no acortas los artículos en el index o usas otra plataforma, sólo tienes que buscar o añadir un elemento con su id correspondiente.

El Css

Para esta realización me decanto por el uso del pseudoselector :target y no por la técnica de los inputs (radio botones), principalmente para ahorrarnos marcado adicional y no complicar su uso.

Y para evitar el efecto tan molesto de los saltos asociados a :target es la razón de haber elegido un elemento ya oculto (display:none). Una explicación detallada de esta técnica la tienes en el artículo: Sistema de pestañas (tabs) Css con :target sin salto

.desplegable, a[name='more']:target ~ .ver_mas { visibility: hidden; width:0; height:0; } a[name='more']:target ~ .desplegable { visibility: visible; width: auto; height: auto; }

Explicación Css complementaria

Para ver un poco mas a fondo los detalles de los códigos Css del ejemplo, despliega la información, pinchando el texto de abajo:

Expandir Explicación
Cerrar el desplegable

El selector .desplegable, a[name='more']:target ~ .ver_mas lo que hace es que el div que contiene esta información no se muestre de entrada y que el texto "Expandir Explicación" se oculte cuando se revela lo oculto.

El selector a[name='more']:target ~ .desplegable:
Usa un selector de atributo de valor "igual a" [name='more'] que al "apuntar" a él (target) le aplica a su hermano (indicado por el símbolo ~) que tenga la clase ".desplegable" las declaraciones que contiene la regla.

He usado visibilidad y tamaños en vez de display: none por accesibilidad.

El resto de propiedades, como las transiciones, sólo son para adornar la demo.

La información se pliega sin necesidad de programar nada, ya que al pinchar el enlace para ocultarla el a[name='more'] pierde el target con lo que aplican los estilos iniciales.

Ocultar esta información

Epílogo

En realidad esta demo tiene muy poco de originalidad. Solamente para aplicar la pseudoclase :target a un uso muy concreto. De hecho son bastantes los artículos de este blog sobre ella, ya sea en demostraciones o comparándola con :checked. Con una pequeña búsqueda por esos términos y:

  1. :Target ¿Algún problema?
  2. Diferencias entre :hover :focus :target :checked usados en tabs
  3. Sistema de pestañas (tabs) Css con :target sin salto y RWD
  4. Guerra de pseudoelementos en Css. :target vs :checked
  5. Cambio de hoja de estilos con puro Css
  6. Filtrar resultados con Css para emular consultas a bases de datos

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 2

  1. Hola Buenas,
    He probado tu codigo y funciona correctamente, pero cuando lo coloco en wordpress no me hace nada, sabes que podria ser? gracias!

    ResponderEliminar
    Respuestas
    1. Sí. Es fácil.
      El error (por omisión) está en la línea 23, carácter 35 y siguientes.
      Así lo podrías solventar

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap