Шаблон:Collapse: различия между версиями

нет описания правки
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
<noinclude>
{{Documentation}}
</noinclude><includeonly>
</noinclude><includeonly>
<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="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 class="collapse-content" style="padding:5px 0 0 10px; display:none;">
<div class="collapse-content" style="padding:5px 0 0 10px;">
{{{2|Содержимое блока}}}
{{{2|Содержимое блока}}}
</div>
</div>
</div>
</div>
<script type="text/javascript">
function toggleCollapse(element) {
  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>
</includeonly>
</includeonly>