Logo de la Universitat de València Logo Unitat Web i Màrqueting Logo del portal

L'efecte de textos desplegables

8 de de gener de 2019

Captura de pàgina web amb un text en forma de desplegable

L'editor de Textos Lliures del gestor de continguts web de la UV disposa d'una eina per aconseguir un efecte de textos desplegables idoni per a reduir l'scroll en una pàgina amb un contingut extens.

Si tenim un Text Lliure (TL) amb un contingut molt extens el podem dividir en funció dels seus subapartats i presentar-lo com uns desplegables coincidents amb cadascun dels subtemes. 

Editor de continguts div del gestor

L'eina és molt senzilla d'utilitzar, però cal anar en compte a l'hora de seleccionar el text que servirà de títol del desplegable, i la resta del text que es visualitzarà desplegat a sota en fer clic al símbol +. Sobretot cal anar en compte que cada text seleccionat pertanya al seu propi i únic 'Div' i no es sobrepose amb cap altre. Convé guardar en la llista activa una còpia del TL en el qual estem treballant per si volem tornar a la versió original. 

A la part central del menú de l'editor de textos, tot just abans dels símbols d'alineació del text, disposem de l'eina 'Div'. Si volem presentar un text en forma de desplegable seleccionarem en primer lloc amb el cursor el que serà el titular del desplegable (segona imatge), clicarem en 'Div' i se'ns obrirà una finestra en la qual escriurem al camp 'Clases de hojas de estilo' el codi 'desplegar1'. Tot seguit seleccionarem el text que conformarà el cos del contingut ocult sota eixe primer titular, i de nou fent clic a 'Div' escriurem al mateix camp el codi 'desplegar-int1' (tercera imatge).

Editor de continguts div del gestor

Si previsualitzem l'efecte, ens trobarem amb que el text escollit per al titular (desplegar1) es reprodueix sobre una franja grisa, i per visualitzar el cos del text corresponent hem de fer clic sobre el símbol +. Amb aquest sistema podem contraure el text en tants desplegables com desitgem (desplegar1, desplegar2, desplegar3...) amb els seus corresponents textos ocults (desplegar-int1, desplegar-int2, desplegar-int3...). 

Una vegada hem aplicat aquest efecte cal guardar, aprovar, i repetir l'operació en la resta de versions idiomàtiques del TL, tot assegurant-se que el text de cada desplegable coincideix en totes les versions. 

Etiquetes