FANDOM


Esta funcionalidad no funciona en dispositivos móviles de la misma forma que en escritorio. En general, cualquier los elemento colapsado en móviles está sin colapsar y no hay botón de mostrar/ocultar.

Colapsar es la funcionalidad que permite colapsar (u ocultar) cualquier elemento HTML.

Hay momentos en los que una página puede contener muchos elementos relacionados que hacen que sea muy larga; utilizar la funcionalidad de colapsar permite a los editores acortar la página, y permitir a los lectores ampliar áreas de interés para ellos. Al igual que en la tabla de contenido, otras partes de una página pueden ser diseñadas para colapsar.

Para hacer un elemento colapsable, basta con añadir la clase "mw-collapsible" a este.

Ejemplo

Colapsando una tabla

Añadiendo "mw-collapsible" como clase, una tabla puede ser colapsada para ahorrar espacio en la página.

Número Letra
1 A
2 B
3 C
{| class="wikitable mw-collapsible" style="float:right"
! Número !! Letra
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Colapsando el texto

Es posible colapsar el texto en un artículo, acortando de manera efectiva la página, y permitiendo al lector decidir si quiere leer el resto de la información. Por ejemplo:

<div class="mw-collapsible">
Este texto es colapsable.
</div>

Resulta en:

Este texto es colapsable.

Configuraciones avanzadas

Estado inicial

Para establecer el estado inicial como colapsado se debe añadir "mw-collapsed" junto con "mw-collapsible", como se puede ver en la siguiente tabla:

{| class="mw-collapsible mw-collapsed wikitable"
! La cabecera || se mantiene visible
|-
| Este || contenido
|-
| está oculto || inicialmente
|}
La cabecera se mantiene visible
Este contenido
está oculto inicialmente

Seleccionando contenido colapsable

También puede especificar qué parte del contenido es colapsable mediante el uso de "mw-collapsible-content".

<div class="mw-collapsible mw-collapsed" style="width:100%">
Este texto no es colapsable; pero el siguiente es colapsable y ocultado por defecto:
<div class="mw-collapsible-content">Este texto debe ser oculto por defecto.</div>
Este texto debe de ser visible.
</div>

Resulta en:

Este texto no es colapsable; pero el siguiente es colapsable y oculto por defecto:

Este texto está oculto por defecto.

Este texto es visible.

Redacción personalizada

¿No quieres expandir / colapsar los enlaces? ¡No hay problema! Cámbialo utilizando "data-expandtext" y "data-collapsetext".

{| class="wikitable mw-collapsible" data-expandtext="Mostrar" data-collapsetext="Ocultar"
!Mi || Cabecera
|-
| A || B
|-
| C || D
|}
Mi Cabecera
A B
C D

Botón de activación

Si observas la tabla del ejemplo anterior, el enlace en la segunda columna realmente aumenta el ancho de la tabla en comparación con el texto en su interior. Esto se puede arreglar al colocar el botón en cualquier otro lugar en la página.

Para hacer esto, tenemos que asignar un ID al elemento. Este ID debe ser prefijado con "mw-customcollapsible-" y seguido de una frase clave única para ese elemento. Utilizando nuestra tabla de arriba, podemos añadir el ID "mw-customcollapsible-myTable".

Esto se encarga de la propia tabla. A continuación, tenemos que añadir un botón / enlace / texto con la clase "mw-customtoggle-myTable" (observa que esto es una clase y no un ID como el de arriba).

{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mi || Cabecera
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable wikia-menu-button">Mostrar/Ocultar tabla</div>
Mi Cabecera
A B
C D

Mostrar/Ocultar tabla

Más información

Ayuda y comentarios

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.