Шаблон:Collapse: различия между версиями
Перейти к навигации
Перейти к поиску
Rodion (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
Rodion (обсуждение | вклад) Нет описания правки |
||
| Строка 4: | Строка 4: | ||
<div class="mw-collapsible" style="width:100%;"> | <div class="mw-collapsible" style="width:100%;"> | ||
<div style="display:flex; justify-content:space-between; align-items:center; cursor:pointer;" | <div style="display:flex; justify-content:space-between; align-items:center; cursor:pointer;" | ||
onclick="this | onclick="toggleCollapse(this)"> | ||
<span style="font-weight:bold;">{{{1|Заголовок}}}</span> | <span style="font-weight:bold;">{{{1|Заголовок}}}</span> | ||
<span class="collapse-arrow">▼</span> | <span class="collapse-arrow">▼</span> | ||
</div> | </div> | ||
<div style="padding:5px 0 0 10px;"> | <div class="collapse-content" style="padding:5px 0 0 10px; display:none;"> | ||
{{{2|Содержимое блока}}} | {{{2|Содержимое блока}}} | ||
</div> | </div> | ||
</div> | </div> | ||
<script> | <script type="text/javascript"> | ||
// Инициализация | function toggleCollapse(element) { | ||
document.querySelectorAll('.mw-collapsible').forEach(el => { | const content = element.nextElementSibling; | ||
const arrow = element.querySelector('.collapse-arrow'); | |||
content.style.display = content.style.display === 'none' ? 'block' : 'none'; | |||
arrow.textContent = content.style.display === 'none' ? '▶' : '▼'; | |||
} | |||
// Инициализация при загрузке | |||
document.addEventListener('DOMContentLoaded', function() { | |||
document.querySelectorAll('.mw-collapsible').forEach(el => { | |||
const content = el.querySelector('.collapse-content'); | |||
const arrow = el.querySelector('.collapse-arrow'); | |||
if (content) content.style.display = 'none'; | |||
if (arrow) arrow.textContent = '▶'; | |||
}); | |||
}); | }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||