FANDOM


Collapsing é um recurso para recolher (ou ocultar) um elemento HTML.

Há momentos quando uma página pode conter vários elementos relacionados que a tornam muito longa; usando um recurso collapsing permite que editores encurtam a página, e permite que os leitores expandam as áreas de interesse para eles. Semelhante à Tabela de Conteúdos, outras partes de uma página da wiki podem ser projetadas para recolher.

Para fazer um elemento retrátil, simplesmente adicione a classe "mw-collapsible" para ele.

Exemplos

Recolhendo uma tabela

Adicionando "mw-collapsible" como a classe, a tabela pode ser recolhida para economizar o espaço da página.

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

Recolhendo texto

É possível recolher texto em um artigo, efetivamente reduzindo a página, e permitindo que o leitor decida se ele quer ler o resto das informações. Por exemplo:

<div class="mw-collapsible">
Este texto é retrátil.
</div>

Resulta em:

Este texto é retrátil.

Configurações avançadas

Estado inicial

Para definir o estado inicial como recolhido adicione "mw-collapsed" junto com "mw-collapsible", tal como pode ser visto na seguinte tabela:

{| class="mw-collapsible mw-collapsed article-table"
! O cabeçalho !! permanece visível
|-
| Este conteúdo || está oculto
|-
| até 'Expandir' || ser clicado
|}
O cabeçalho permanece visível
Este conteúdo está oculto
até 'Expandir' ser clicado

Selecionando conteúdo retrátil

Você também pode especificar qual parte é o conteúdo retrátil usando "mw-collapsible-content".

<div class="mw-collapsible mw-collapsed" style="width:100%">
Este texto não é retrátil; mas o próximo é retrátil e oculto por padrão:
<div class="mw-collapsible-content">Este texto deve ser oculto por padrão.</div>
Este texto deve ser visível também.
</div>

Resulta em:

Este texto não é retrátil; mas o próximo é retrátil e oculto por padrão:

Este texto deve ser oculto por padrão.

Este texto deve ser visível também.

Texto personalizado

Não gosta de Expandir/Recolher para os links? Sem problema! Mude-os usando "data-expandtext" e "data-collapsetext".

{| class="article-table mw-collapsible" data-expandtext="Iluminar" data-collapsetext="Escurecer"
! Meu || Cabeçalho
|-
| A || B
|-
| C || D
|}
Meu Cabeçalho
A B
C D

Nota: para alterar esses links no site inteirol exigiria editar MediaWiki:Collapsible-expand e MediaWiki:Collapsible-collapse.

Botão de alternância

Se observar na tabela do exemplo acima, o link na segunda coluna realmente aumenta a largura da tabela em relação ao texto dentro dela. Nós podemos consertar isso por ter a alternância colocada em qualquer outro lugar na página.

Para fazer isso, temos que atribuir um ID para o elemento. Este ID deve ser prefixado com "mw-customcollapsible-" e seguido por uma frase de chave exclusiva para este elemento. Utilizando nossa tabela acima, podemos adicionar o ID "mw-customcollapsible-minhaTabela".

Que cuida da própria tabela. Em seguida, nós temos que adicionar um elemento de botão/link/texto com a classe "mw-customtoggle-minhaTabela" (note isso é uma classe e não um ID como acima).

{| class="article-table mw-collapsible" id="mw-customcollapsible-minhaTabela"
! Meu || Cabeçalho
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-minhaTabela wikia-menu-button">Mostrar/Ocultar tabela</div>
Meu Cabeçalho
A B
C D

Mostrar/Ocultar tabela

Veja também

Mais ajuda e feedback