ВП:СБ ВП:СБ

Сворачивающиеся блоки дают возможность динамически «прятать» своё содержимое (с помощью JavaScript в браузере посетителя), оставляя только заголовок. Сворачивающиеся блоки обычно используются для навигационных шаблонов и скрытия больших кусков необязательного текста, то есть такой информации, которая заинтересует не всех читателей.

Класс " mw-collapsible " может быть присвоен практически к любому блочному элементу (div, list, таблицы, строки и ячейки таблицы, и т. д.).

Простой пример

Добавление класса " mw-collapsible " к элементу делает его содержимое сворачивающимся.

<div class="mw-collapsible" style="width:400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>

Небольшое изменение

Чтобы метка-переключатель не «проваливалась» вниз при сворачивании текста, к стилю сворачиваемого элемента необходимо добавить " overflow: hidden ".

<div class="mw-collapsible" style="width:400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>

Начальное состояние

Блок может быть сразу свёрнут. Добавление дополнительного класса " mw-collapsed " делает начальное состояние свернутым.

<div class="mw-collapsible mw-collapsed" style="width:400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>

Использование с таблицами

Для того, чтобы сделать таблицу сворачивающейся, нужно добавить ей класс mw-collapsible , при этом в последнюю заголовочную ячейку («!» в викикоде) первой строки добавляется переключатель [скрыть] , прячущий все остальные строки. При использовании с таблицами заголовок таблицы будет всегда виден, а сворачиваться будут только строки. Таблица может быть любого класса — standard, wikitable, wide: {| class="standard mw-collapsible" . Таблица может быть сразу свёрнута: {| class="standard mw-collapsible mw-collapsed" . Следует быть осторожным с использованием данного механизма в статьях, так как такая таблица не развернётся на печати в pdf.

{| class="standard mw-collapsible mw-collapsed"
! Заголовок || таблицы || остаётся || видимым
|-
| А строки || таблицы || в || начальном
|-
| состоянии || свернуты || ||
|}

Заголовок таблицы из одной ячейки

Некоторые шаблоны ( пример ) оставляют последнюю ячейку в первой строке заголовочной. Но как правило переключатель в правой части таблицы выглядит не очень красиво, поэтому обычно первую строку делают состоящей из одной ячейки.

{| class="standard mw-collapsible"
!colspan=3|Заголовок
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|}

Таблица может иметь несколько строк заголовков. Например , первая строка-заголовок может сворачиваться, а в следующей быть сортировка.

Частично сворачивающееся содержимое

Можно также определить, какая часть текста сворачивающаяся, а какая нет, используя класс " mw-collapsible-content ". В следующем примере метка-переключатель будет присоединена к элементу " mw-collapsible ", содержащий элемент " mw-collapsible-content ", но действие метки-переключателя будет распространяться только на внутренний элемент.

<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>

Переопределение текста метки-переключателя

Используя атрибуты data-expandtext и data-collapsetext можно переопределить текст метки-переключателя.

<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать!!!" data-collapsetext="Скрыть!!!">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>

Создание отдельной метки-переключателя

Если вы не хотите, чтобы метка-переключатель создавалась по умолчанию, можно создать собственную метку-переключатель. Она может располагаться как внутри так и вне сворачивающегося элемента. Метка-переключатель связывается со сворачивающимся элементом при помощи использования класса с префиксом mw-customtoggle для метки-переключателя и атрибута ID с префиксом mw-customcollapsible для соответствующего сворачивающегося элемента.

<div class="mw-customtoggle-myDiv1" style="background:#e0e8ff">Это переключатель для сворачивания текста</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv1">
<div class="mw-collapsible-content">Это сворачивающийся текст.</div>
</div>
<div class="mw-customtoggle-myDiv1" style="background:#e8ffe0">Это тоже переключатель для сворачивания текста!</div>

Связывание одной метки-переключателя с несколькими элементами

Допустимо сворачивать несколько элементов одновременно при помоши одной метки-переключателя. Кроме того, поскольку класс " mw-collapsible ", обеспечивающий сворачиваемость, может быть присвоен любому типу элементов, в частности строкам таблицы, то эта возможность позволяет компактно отображать длинные таблицы с группировкой подитогов и возможностью развернуть детали одновременно по всем подитогам.

Площадь материков и государств.
<div class="mw-customtoggle-myDiv2" style="color:#0B0080;"><small>[Показать/скрыть подробности]</small></div>
{| class="wikitable"
|- bgcolor=lightgreen
| Название || Площадь, кв км
|- bgcolor=lightblue
| Северная Америка || 24 250 000
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| Канада || 9 984 670
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| США || 9 519 431
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| ... || ...
|- bgcolor=lightblue
| Южная Америка || 17 840 000 
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| Бразилия || 8 514 877
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| Аргентина || 2 780 400
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2"
| ... || ...
|- bgcolor=lightblue
| ... || ...
|}

Класс " NavFrame " является устаревшим способом использования сворачиваемых блоков. Класс " NavFrame " может быть присвоен блочному элементу div. Для создания сворачивающегося блока div к нему добавляется класс NavFrame , при этом внутренний блок с классом NavHead образует всегда видимый заголовок, а любые внутренние блоки с классами NavContent (содержимое) и NavPic (изображения) прячутся. Начальное состояние сворачивающегося блока (сразу после загрузки страницы) можно изменить с помощью одного из трёх дополнительных классов:

• collapsed означает, что блок будет свёрнут
• expanded означает, что блок будет развёрнут
• autocollapse : все блоки с этим классом будут свёрнуты, только если общее количество сворачивающихся блоков этого типа (сворачиваемые блоки и сворачиваемые таблицы считаются отдельно) на странице больше одного.

Если дополнительные классы не указаны, то по умолчанию сворачиваемые блоки имеют состояние autocollapse .

<div class="NavFrame collapsed">
  <div class="NavHead">Заголовок</div>
  <div class="NavContent">
     Свёрнутый по умолчанию блок
  </div>
  <div class="NavPic">
     Свёрнутое по умолчанию изображение
  </div>
</div>

    Свёрнутый по умолчанию блок

    Свёрнутое по умолчанию изображение

Ограничения

ВП:СБ-О ВП:СБ-О

Имейте в виду, что обычно любые свёрнутые блоки/таблицы отобразятся раскрытыми (даже при указанном collapsed) в «Создать книгу», «Скачать как PDF», «Версия для печати» и мобильной версии.

В мобильной версии не работает сворачивание/разворачивание (JS) блоков. Если в коде какого-нибудь шаблона скрытую часть дополнить display:none , то без JS display не изменится и содержание блока вообще не покажется.

В навигационные шаблоны добавляется класс navbox и он исключается из экспорта/печати в MediaWiki:Print.css , также они не показываются в мобильной версии.

Использование

По возможности желательно не использовать код сворачивающихся блоков и таблиц напрямую, а использовать уже существующие базовые шаблоны. Например, сворачивающиеся блоки используются в

• {{ Скрытый блок }}
• {{ Начало скрытого блока }} … {{ Конец скрытого блока }}
• и в других базовых сворачиваемых шаблонах: Категория:Шаблоны:Сворачиваемые блоки

а сворачивающиеся таблицы используются в

• {{ Навигационная таблица }}
• {{ Навигационная полоса }}
• и в других базовых навигационных шаблонах: Категория:Шаблоны:Для навигационных шаблонов

Персональные настройки

Зарегистрированные участники могут изменять для себя некоторые настройки сворачиваемых блоков и таблиц, изменяя значения следующих параметров у себя в monobook.js (указаны значения по умолчанию):

NavigationBarShowDefault = 1 //максимальное количество автосворачиваемых блоков 
 //(сворачиваемые блоки и сворачиваемые таблицы считаются отдельно), после которого они будут изначально свёрнуты
var NavigationBarHide = '[скрыть]' //ссылка-переключатель на развёрнутом блоке
var NavigationBarShow = '[показать]' //ссылка-переключатель на свёрнутом блоке

Технические детали

Механизм «сворачивания» реализуется JavaScript -кодом в MediaWiki:Common.js , работающим во всех современных браузерах, включая IE 5.5+, Firefox, Chrome/Safari/KHTML, Opera 8+. Посетители, отключившие в браузере поддержку JavaScript, будут видеть эти блоки в развёрнутом виде без ссылок спрятать/показать.

JavaScript-код был скопирован из и затем переработан. Основные отличия:

• добавлен класс expanded для div’ов;
• у таблиц скобки являются частью ссылки « [скрыть] », как и у div'ов.

Также см. и .

Наведя мышь на ссылку показать/скрыть и видя адрес ссылки, можно определить, какого типа сворачивающийся блок используется.

• Википедия:Глобальный код
• Википедия:Таблицы
• Категория:Шаблоны:Сворачиваемые блоки
• Категория:Шаблоны:Для навигационных шаблонов