Zwijanie jest opcją do pokazywania (lub ukrywania) elementów HTML.
Kiedy strona zawiera wiele powiązanych ze sobą elementów, które sprawiają, że strona ta jest bardzo długa, można uzyć zwijania, funkcja ta pozwala redaktorom na skrócenie strony i umożliwienie czytelnikom na rozwinięcie obszarów, które ich interesują. Podobnie do spisu treści, inne elementy wiki mogą być zaprojektowane do zwijania.
Aby stworzyć zwijany element, wystarczy dodać do niego klasę "mw-collapsible".
Przykłady
Zwijanie tabeli
Dodając "mw-collapsible" jako klasę, można zwinąć tabelę oszczędzając miejsce.
| Numer | Litera |
|---|---|
| 1 | A |
| 2 | B |
| 3 | C |
{| class="wikitable mw-collapsible" style="float:right"
! Numer !! Litera
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}
Zwijanie tekstu
Możliwe jest również zwijanie tekstu w artykułach, skutecznie skracając stronę i pozwalając czytelnikowi zdecydować, czy chce przeczytać resztę informacji. Dla przykładu:
<div class="mw-collapsible">
Ten tekst jest zwijany.
</div>
Daje w rezultacie:
Zaawansowane ustawienia
Stan początkowy
Aby ustawić stan początkowy dla zwijanego elementu można się posłużyć klasą "mw-collapsed" oraz "mw-collapsible", przykład można ujrzeć poniżej:
{| class="mw-collapsible mw-collapsed wikitable"
! Nagłówek || pozostaje widoczny
|-
| Ta zawartość || jest ukryta
|-
| podczas || pierwszego ładowania
|}
| Nagłówek | pozostaje widoczny |
|---|---|
| Ta | zawartość |
| jest początkowo | ukryta |
Wybieranie zawartości zwijania
Można również określić, która część zawartości może być zwijana używając "mw-collapsible-content".
<div class="mw-collapsible mw-collapsed" style="width:100%">
Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:
<div class="mw-collapsible-content">Ten tekst powinien być ukryty domyślnie.</div>
Ten tekst powinien być również widoczny
</div>
Co da w rezultacie:
Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:
Ten tekst powinien być również widoczny
Niestandardowe nazwy
Nie lubisz Rozwiń/Zwiń w linkach? Nie ma problemu! Zmień to używając "data-expandtext" i "data-collapsetext".
{| class="wikitable mw-collapsible" data-expandtext="Illuminati" data-collapsetext="Deluminati"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}
| Mój | Nagłówek |
|---|---|
| A | B |
| C | D |
Przycisk przełączania
Jeśli zauważysz na przykładzie powyższej tabeli, że link w drugiej kolumnie zwiększa szerokość tabeli w stosunku do tekstu zawartego w nim. Można ustalić, aby przełącznik był umieszczony w innym miejscu na stronie.
Aby to zrobić musimy przypisać ID do elementu. To ID musi być poprzedzone prefiksem "mw-customcollapsible-", a następnie należy dodać unikalny tekst dla tego elementu. Korzystanie z powyższej tabeli, możemy dodać ID "mw-customcollapsible-myTable".
Który zajmuje się samą tabelą. Następnie, możemy dodać przycisk/link/tekst z klasą "mw-customtoggle-myTable" (należy pamiętać, że class (klasa) i ID muszą mieć taki sam unikalny tekst).
{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}
<div class="mw-customtoggle-myTable wikia-menu-button">Pokaż/Ukryj tabelę</div>
| Mój | Nagłówek |
|---|---|
| A | B |
| C | D |