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 użyć 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 |