<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Collapse (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Collapse.css">
<style>
  .demo { padding: 24px; background: var(--kole-color-page-bg); font-family: var(--font-family); }
  h1 { font-size: 20px; margin: 0 0 4px; color: var(--kole-color-text-title); }
  .sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
  .demo-block { max-width: 560px; margin-bottom: 24px; }
  .demo-block > .hint { color: var(--kole-color-text-secondary); font-size: 12px; margin: 0 0 12px; }
</style>
</head>
<body>
<div class="demo">
  <h1>Kole UI · Collapse 组件（纯 H5）</h1>
  <p class="sub">对齐规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式</p>

  <div class="demo-block">
    <p class="hint">手风琴模式（同时仅展开一个）</p>
    <div class="kole-collapse" data-accordion>
      <div class="kole-collapse-item is-open">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">基本设置</span></div>
        <div class="kole-collapse-content">系统名称、主题色、默认语言等基础配置。</div>
      </div>
      <div class="kole-collapse-item">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">通知设置</span></div>
        <div class="kole-collapse-content" hidden>邮件、短信、站内信通知开关。</div>
      </div>
      <div class="kole-collapse-item">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">安全设置</span></div>
        <div class="kole-collapse-content" hidden>登录保护、密码策略、IP 白名单。</div>
      </div>
      <div class="kole-collapse-item is-disabled">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">高级（无权限）</span></div>
        <div class="kole-collapse-content" hidden>仅管理员可见的高级选项。</div>
      </div>
    </div>
  </div>

  <div class="demo-block">
    <p class="hint">非手风琴（可同时展开多个）</p>
    <div class="kole-collapse">
      <div class="kole-collapse-item is-open">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">订单管理</span></div>
        <div class="kole-collapse-content">查看与处理所有订单。</div>
      </div>
      <div class="kole-collapse-item is-open">
        <div class="kole-collapse-header" role="button" tabindex="0"><span class="kole-collapse-arrow">▶</span><span class="kole-collapse-title">退款管理</span></div>
        <div class="kole-collapse-content">退款审核与到账记录。</div>
      </div>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.kole-collapse').forEach(root => {
  const accordion = root.hasAttribute('data-accordion');
  root.addEventListener('click', (e) => {
    const header = e.target.closest('.kole-collapse-header');
    if (!header) return;
    const item = header.parentElement;
    if (item.classList.contains('is-disabled')) return;
    const open = item.classList.toggle('is-open');
    const content = item.querySelector('.kole-collapse-content');
    if (content) content.hidden = !open;

    if (accordion && open) {
      root.querySelectorAll('.kole-collapse-item.is-open').forEach(other => {
        if (other !== item) {
          other.classList.remove('is-open');
          const c = other.querySelector('.kole-collapse-content');
          if (c) c.hidden = true;
        }
      });
    }
  });
});
</script>
</body>
</html>
