Logo de la Universdad de Valencia Logo Unidad Web y Márketing Logo del portal

El efecto de textos desplegables

8 de enero de 2019

Captura de página web con un texto en forma de desplegable

El editor de Textos Libres del gestor de contenidos web de la UV dispone de una herramienta para conseguir un efecto de textos desplegables idóneo para reducir el scroll en una página con un contenido extenso.

Si tenemos un Texto Libre (TL) con un contenido muy denso, lo podemos dividir en función de sus subapartados y presentarlo en forma de desplegables coincidentes con cada uno de los subtemas.

Ediitor de contenidos div del gestor

La herramienta es muy sencilla de utilizar, pero hay que llevar cuidado a la hora de seleccionar el texto que servirá de título del desplegable, y el resto del texto que se visualizará desplegado debajo al hacer clic en el símbolo +. Sobre todo hay que asegurarse de que cada texto seleccionado pertenezca a su propio y único 'Div' y no se sobreponga con ningún otro. Conviene guardar en la lista activa una copia del TL en el cual estamos trabajando por si queremos volver a la versión original. 

En la parte central del menú del editor de textos, justo antes de los símbolos de alineación del texto, disponemos de la herramienta 'Div'. Si queremos presentar un texto en forma de desplegable seleccionaremos en primer lugar con el cursor el que será el titular del desplegable, clicaremos en 'Div' y se nos abrirá una ventana en la que escribiremos en el campo 'Clases de hojas de estilo' el código 'desplegar1' (segunda imagen). A continuación seleccionaremos el texto que conformará el cuerpo del contenido oculto bajo ese primer titular, y de nuevo haciendo clic en 'Div' escribiremos en el mismo campo el código 'desplegar-int1' (tercera imagen).

Ediitor de contenidos div del gestor

Si previsualizamos el efecto, nos encontraremos con que el texto escogido para el titular (desplegar1) se reproduce sobre una franja gris, y para visualizar el cuerpo del texto correspondiente tenemos que hacer clic sobre el símbolo +. Con este sistema podemos contraer el texto en tantos desplegables como deseemos (desplegar1, desplegar2, desplegar3...) con sus correspondientes textos ocultos (desplegar-int1, desplegar-int2, desplegar-int3...). 

Una vez hemos aplicado este efecto hay que guardar, aprobar, y repetir la operación en el resto de versiones idiomáticas del TL, asegurándose de que el texto de cada desplegable coincide en todas las versiones.

Etiquetas