Редактирование: РуСказки:Сворачиваемые блоки (раздел)

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

'''1. Простой пример'''<br>
Добавление класса "<code>mw-collapsible</code>" к элементу делает его содержимое сворачивающимся.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible" style="width:400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible" style="width: 400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</div>

'''2. Небольшое изменение'''<br>
Чтобы метка-переключатель не «проваливалась» вниз при сворачивании текста, к стилю сворачиваемого элемента необходимо добавить "<code>overflow: hidden</code>".<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible" style="width:400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible" style="width: 400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</div>

'''3. Начальное состояние'''<br>
Добавление дополнительного класса "<code>mw-collapsed</code>" делает начальное состояние свернутым.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width: 400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>
</div>

'''4. Использование с таблицами'''<br>
При использовании с таблицами заголовок таблицы будет всегда виден, а сворачиваться будут только строки. Осторожно с использованием в статьях, такая таблица не развернётся на печати в pdf.<br>
<syntaxhighlight lang="html4strict">
{| class="mw-collapsible mw-collapsed wikitable"
! Заголовок таблицы || остаётся видимым
|-
| А строки таблицы || в начальном
|-
| состоянии || свернуты
|}
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
{| class="mw-collapsible mw-collapsed wikitable"
! Заголовок таблицы || остаётся видимым
|-
| А строки таблицы || в начальном
|-
| состоянии || свернуты
|}
</div>

'''5. Частично сворачивающееся содержимое'''<br>
Можно также определить, какая часть текста сворачивающаяся, а какая нет, используя класс "<code>mw-collapsible-content</code>". В следующем примере метка-переключатель будет присоединена к элементу "<code>mw-collapsible</code>", содержащий элемент "<code>mw-collapsible-content</code>", но действие метки-переключателя будет распространяться только на внутренний элемент.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>
</div>

'''6. Переопределение текста метки-переключателя'''<br>
Используя атрибуты <code>data-expandtext</code> и <code>data-collapsetext</code> можно переопределить текст метки-переключателя.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать" data-collapsetext="Скрыть">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать" data-collapsetext="Скрыть">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>
</div>

'''7. Создание отдельной метки-переключателя'''<br>
Если вы не хотите, чтобы метка-переключатель создавалась по умолчанию, можно создать собственную метку-переключатель. Она может располагаться как внутри так и вне сворачивающегося элемента. Метка-переключатель связывается со сворачивающимся элементом при помощи использования класса с префиксом <code>mw-customtoggle</code> для метки-переключателя и атрибута ID с префиксом <code>mw-customcollapsible</code> для соответствующего сворачивающегося элемента.<br>
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<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>
</div>

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

<syntaxhighlight lang="html4strict">
Площадь материков и государств.
<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
| ... || ...
|}
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''<br>
Площадь материков и государств.
<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
| ... || ...
|}
</div>