Сворачивание позволяет скрыть любой элемент на странице с помощью специальной кнопки «свернуть/развернуть». Это также можно использовать для крупных таблиц и текстов.
Данную функцию полезно использовать, когда страница содержит очень много информации, часть из которой востребована только в некоторых случаях. Иногда сворачивание полезно, чтобы скрыть спойлеры или крупные навигационные таблицы (например, см. эту статью)
Сворачивание таблицы[]
Добавьте код «mw-collapsible» как класс, чтобы в таблице появилась ссылка «свернуть/развернуть».
| Цифра | Буква |
|---|---|
| 1 | A |
| 2 | Б |
| 3 | В |
{| class="article-table mw-collapsible" style="float:right"
! Цифра !! Буква
|-
| 1 || A
|-
| 2 || Б
|-
| 3 || В
|}
Сворачивание текста[]
Аналогично можно этот класс использовать для сворачивания текста внутри статьи.
Код:
<div class="mw-collapsible">
Этот текст можно свернуть.
</div>
Результат:
Свёрнутая по умолчанию таблица[]
Чтобы таблица изначально была свёрнута, используйте двойной код: «mw-collapsed» и «mw-collapsible». Пример:
{| class="mw-collapsible mw-collapsed article-table"
! Заголовок || всегда будет виден
|-
| Содержимое || всегда
|-
| будет || скрыто
|}
| Заголовок | всегда будет виден |
|---|---|
| Содержимое | всегда |
| будет | скрыто |
Скрытие спойлеров в тексте[]
Скрыть текст внутри статьи можно, используя двойной код: указанный в предыдущем разделе с добавлением кода «mw-collapsible-content».
Код:
<div class="mw-collapsible mw-collapsed" style="width:100%">
Этот текст предшествует скрытому тексту.
<div class="mw-collapsible-content">
Этот текст скрыт изначально.
</div></div>
Результат:
Этот текст предшествует скрытому тексту.
Настройка текста «свернуть/развернуть»[]
Можно добавить свой текст вместо стандартного «свернуть/развернуть». Для этого используйте код «data-expandtext» и «data-collapsetext».
{| class="article-table mw-collapsible" data-expandtext="Открыть" data-collapsetext="Закрыть"
! Цифра !! Буква
|-
| 1 || A
|-
| 2 || Б
|}
| Цифра | Буква |
|---|---|
| 1 | A |
| 2 | Б |
Кнопка «свернуть/развернуть»[]
Как вы заметили, ссылка «свернуть/развернуть» увеличивает ширину колонки таблицы, где она находится. Этого можно избежать, если вынести переключатель за пределы таблицы, что удобно сделать с помощью кнопки.
Если присвоить переключателю значение "mw-customcollapsible-myTable", то при использовании кода "mw-customtoggle-myTable" это можно осуществить следующим образом:
{| class="article-table mw-collapsible" id="mw-customcollapsible-myTable"
! Цифра !! Буква
|-
| 1 || A
|-
| 2 || Б
|}
<div class="mw-customtoggle-myTable wds-button">Открыть/закрыть таблицу</div>
| Цифра | Буква |
|---|---|
| 1 | A |
| 2 | Б |
- подобную технику также можно применить к сворачиваемому блоку (div)