Ayuda:Contrayendo

Contraer es una funcionalidad que permite contraer (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 contraer 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 contraerse.

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

Ejemplos

Contrayendo una tabla

Añadiendo "mw-collapsible" como clase, una tabla puede ser contraída para ahorrar espacio en la página: 

{| class="article-table mw-collapsible"
! Número !! Letra
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Esto resulta en lo siguiente:

Número Letra
1 A
2 B
3 C

Contrayendo texto

Es posible contraer 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 puede ser contraído.'''

Esto resulta en lo siguiente:

Este texto puede ser contraído.

Configuraciones avanzadas

Estado inicial

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

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

Esto resulta en lo siguiente:

La cabecera se mantiene visible
Este contenido
está oculto inicialmente

Seleccionar contenido contraíble

También puedes especificar qué parte del contenido es contraíble mediante el uso de "mw-collapsible-content": 

<div class="mw-collapsible mw-collapsed" style="width:100%">
'''Este texto no es contraíble; pero el siguiente es contraíble y oculto por defecto:'''
<div class="mw-collapsible-content">Este texto está oculto por defecto.</div>
'''Este texto es visible.'''
</div>

Esto resulta en lo siguiente:

Este texto no es contraíble; pero el siguiente es contraíble y oculto por defecto:

Este texto está oculto por defecto.

Este texto es visible.

Redacción personalizada

¿No te gustan las palabras "Expandir / Contraer"? Cámbialas utilizando "data-expandtext" y "data-collapsetext": 

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

Esto resulta en lo siguiente:

Mi Cabecera
A B
C D

Si quieres un botón de contracción más compacto, puedes usar cualquier símbolo: 

{| class="article-table mw-collapsible mw-collapsed" data-expandtext="&#9660;" data-collapsetext="&#9650;"
! Mi || Cabecera
|-
| A || B
|-
| C || D
|}

Esto resulta en lo siguiente:

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). 

<span class="mw-customtoggle-myTable wds-button wds-is-secondary">Mostrar/Ocultar tabla</span>
{| class="article-table mw-collapsible" id="mw-customcollapsible-myTable"
! Mi || Cabecera
|-
| A || B
|-
| C || D
|}

Esto resulta en lo siguiente:
Mostrar/Ocultar tabla

Mi Cabecera
A B
C D

Véase también

Ayuda y comentarios