El texto plegable es quizá el más básico de los esquemas de diseño interactivo de tu sitio. Esto te permite enganchar y ojear la visibilidad del texto o contenido haciendo clic en esa etiqueta de contenido. Este artículo te ayudará a saber cómo añadir un texto plegable. Así que, siéntate, relájate y sigue leyendo.
Proceso detallado para añadir un texto plegable
Los creadores de sitios web que se sientan cómodos editando HTML pueden añadir texto colapsable directamente al widget de texto o a la página de contenido. Si tienes un lugar en una sección colapsable, puedes editarlo con el uso de la función Editor WYSIWYG.
Aumenta el tamaño de la barra de herramientas WYSIWYG para ver claramente el botón HTML. Una vez que pulses el botón, aparecerá una ventana emergente en la que podrás editar directamente el texto HTML de tu contenido.
Todo texto colapsable debe tener un div contenedor que rodee todo el trozo, un encabezado que actúe como organizador y un div de destino que rodee el texto que deseas colapsar. Es vital utilizar las etiquetas correctas, así como etiquetas de clase para cada elemento, o de lo contrario el texto colapsado no funcionará.
Puedes utilizar el div con class=»openberkeley-collapsible-container» para el contenedor.
Puedes utilizar un encabezado (h2, h3, h4 o h5) con class=»openberkeley-collapsible-controller» como controlador.
Utiliza div con class=»openberkeley-collapsible-target» para el texto de destino.
Puedes copiar y pegar el código de ejemplo que aparece a continuación en las ventanas de edición de HTML. Añade el texto aunque ya haya HTML en la ventana; sólo tienes que asegurarte de copiar y pegar el código en la posición correcta.
En el código de ejemplo que aparece a continuación, intercambia el texto de la etiqueta <h2> (el encabezamiento del controlador), así como el de la etiqueta <p> (contenido de destino del párrafo) con el texto colapsado.
Ejemplo
<textarea style="width:100%;min-height:500px;">
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>In hac habitasse platea dictumst. Suspendisse dictum, velit vel vehicula gravida,
turpis nulla dignissim nibh, a tristique enim dui vestibulum enim. Duis cursus
euismod diam vitae gravida. Etiam a purus lorem.</p>
</div>
</div>
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Another line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>Here is another paragraph that will expand. It can be long or short. You can add any formatting and layout you want to a collapsible item. For example:</p>
<h3>Here is a subheading</h3>
<p>More text.</p>
<table>
<tbody>
<tr><th>Table header</th><th>Table header 2</th></tr>
<tr>
<td>Content of table</td>
<td>More content of table</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>No longer expanding!</h2>
<p>This stuff is just regular.</p>
</textarea>Cuando hayas terminado, pulsa el botón Actualizar. Aquí verás reflejadas tus modificaciones en el editor WYSIWYG.
Cada objetivo y controlador se mostrará en el editor con un borde punteado o discontinuo. Los bordes no se mostrarán si ves la página web guardada. Si has hecho un texto plegable en la ventana emergente HTMP, estos bordes te ayudarán a editar el contenido más adelante sin necesidad de abrir la vista HTML.
Cuando entres en la página web, todo el texto empezará a contraerse. Para expandirlo, pulsa el encabezamiento del controlador. La tarea de colapso se ha probado para la accesibilidad. Funciona muy bien tanto para los lectores de pantalla como para los usuarios que sólo utilizan el teclado.
Contraer todo
Si lo deseas, puedes poner enlaces para contraer los textos a la vez. Sólo tienes que hacer clic en el editor HTML y luego pegar el código antes del elemento colapsable inicial.
Esto tendrá el siguiente aspecto:
Sólo puede haber un único conjunto de enlaces de colapso para cada página.
Cómo editar texto plegable
Después de insertar un texto colapsable, no hay necesidad de volver a HTML para hacer alguna edición. El editor HTML WYSIWYG editará el contenido de tu encabezado así como el texto colapsable. Aquí verás un trazo discontinuo en la zona del encabezado y un trazo punteado alrededor del texto plegable. Esto es además de la forma en que aparece en la vista pública de tu página web que variará dependiendo del tema que utilices para tu sitio. Estos contornos te permitirán ver si el texto está fuera o dentro del trozo plegable.
Para una visualización notable, asegúrate de que el texto de tu encabezamiento sea breve o corto.
Una vez que el texto colapsable es lo último en el contenido de la página, es difícil incluir texto no colapsable bajo él sin necesidad de firmar en código HTML. Cuando edites el texto HTML, asegúrate de dejar una etiqueta
vacía a continuación del último impuesto colapsable. Los mismos problemas pueden tener lugar si intentas incluir texto no colapsable entre dos elementos que son colapsables o cuando intentas eliminar el texto colapsable. Para realizar con éxito estas alteraciones, asegúrate de visitar el modo HTML.
Sólo hay un conjunto de colapsables para cada página. Los enlaces funcionan bien en textos que son plegables a pesar de dónde se encuentren en tu página. Por ello, se recomienda encarecidamente que evites colocar textos plegables en muchos paneles de una página.
Pros Añadir textos plegables
Una ventaja de contraer el texto es que tu encabezamiento se convierte en elementos de borde, proporcionando a los usuarios una impresión del texto disponible sin necesidad de desplazarse casi tanto.
Añadir texto plegable a tu página ofrece interactividad, al tiempo que te permite incluir más texto en tu sitio.
Otra ventaja es que quienes utilizan teclados no necesitan pisar los factores enfocables de la página de inicio para ir al lugar que desean.
Conclusión
¿Es el texto colapsable la mejor forma y la más fiable para la documentación de ayuda, o sólo presenta más problemas y preocupaciones?
En conjunto, el texto plegable ofrece una gran ventaja a la hora de ordenar el texto o el contenido y debe seguirse a pesar de algunos defectos. Un texto plegable puede hacer lo siguiente:
Esto comprime mucha información vital en un lugar pequeño que los lectores pueden escanear rápidamente.
Esto también oculta la extensión de la información, por lo que el texto parecerá más ligero y sencillo a los lectores y usuarios. Hasta que amplíen las secciones para saber cuánto texto hay.
Esto también te permite integrar el texto de forma que se modifique según las necesidades de los usuarios. Cuando los lectores necesiten más detalles, sólo tendrán que ir al enlace para saber y leer más.
Esto también permite a los lectores interrelacionarse con el texto, de modo que eligen lo que les gusta saber.
Cuando pasas a páginas largas, colapsar los textos puede ser una victoria notable tanto para la usabilidad como para la navegación.
Sin embargo, también tiene algunos inconvenientes, como que si un lector busca una frase clave enterrada dentro del texto colapsado, puede confundirse al no encontrar la frase clave resaltada en la página web, ya que el texto colapsado permanece colapsado incluso en los resultados de una búsqueda.
