Википедия:Сворачиваемые блоки

Короткая ссылка-перенаправление

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

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

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

[править код]

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

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

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

[править код]

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

window.NavigationBarShowDefault = 1 //максимальное количество автосворачиваемых блоков 

Класс mw-collapsible

[править код]

Класс "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 |}
Заголовок
Ячейка 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 | ... || ... |}

Площадь материков и государств.

[Показать/скрыть подробности]
Название Площадь, кв км
Северная Америка 24 250 000
Канада 9 984 670
США 9 519 431
... ...
Южная Америка 17 840 000
Бразилия 8 514 877
Аргентина 2 780 400
... ...
... ...

См. также

[править код]