खुम्चेको कार्ड

सारांश मात्र पहिले देखाउँदै, चाहिनेले मात्र फुकाएर विस्तृत हेर्ने।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<details class="dc-fold">
  <summary class="dc-fold__sum">
    <span class="dc-fold__main">
      <span class="dc-fold__title">3월 18일 출근 기록</span>
      <span class="dc-fold__sub">A현장 · 8시간 · 일급 140,000원</span>
    </span>
    <span class="dc-fold__mark" aria-hidden="true">⌄</span>
  </summary>
  <div class="dc-fold__body">
    <dl class="dc-fold__dl">
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">출근</dt>
        <dd class="dc-fold__dd">오전 7시 02분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">퇴근</dt>
        <dd class="dc-fold__dd">오후 4시 10분</dd>
      </div>
      <div class="dc-fold__line">
        <dt class="dc-fold__dt">확인한 사람</dt>
        <dd class="dc-fold__dd">최영호 소장</dd>
      </div>
    </dl>
    <p class="dc-fold__note">기록이 다르면 현장 관리자에게 알려 주세요.</p>
  </div>
</details>

.dc-fold {
  overflow: hidden;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-fold__sum {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 60px; padding: var(--dc-3) var(--dc-4);
  list-style: none; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-fold__sum::-webkit-details-marker { display: none; }
.dc-fold__sum:active { background: var(--dc-sunken); }
.dc-fold__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-fold__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-fold__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-fold__mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 14px; line-height: 1;
  transition: transform var(--dc-slow);
}
.dc-fold[open] .dc-fold__mark { transform: rotate(180deg); }
.dc-fold__body {
  padding: 0 var(--dc-4) var(--dc-4);
  border-top: 1px solid var(--dc-line);
}
.dc-fold__dl {
  display: flex; flex-direction: column; gap: var(--dc-2);
  margin: var(--dc-3) 0 0;
}
.dc-fold__line { display: flex; justify-content: space-between; gap: var(--dc-3); }
.dc-fold__dt { margin: 0; font-size: 13px; color: var(--dc-text-mute); }
.dc-fold__dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--dc-text); text-align: right; }
.dc-fold__note {
  margin: var(--dc-3) 0 0;
  font-size: 12px; line-height: 1.6; color: var(--dc-text-mute);
}
.dc-fold-stack {
  display: flex; flex-direction: column; gap: var(--dc-3);
  padding: var(--dc-4);
  background: var(--dc-bg);
}

कसरी प्रयोग गर्ने

बन्द अवस्थामा पनि भित्र के छ थाहा हुने सारांश लेख्नुहोस्
सबैभन्दा धेरै खोलिने एउटा सुरुमै खुलै राख्नुहोस्
पढ्नै पर्ने कुरा नखुम्चाउनुहोस् — खुम्चाए पढिन्न

ध्यान दिनुपर्ने कुरा

details/summary ले बनाउनुहोस्: स्क्रिप्ट नभए पनि खुल्छ, स्क्रिन रिडरले अवस्था पनि भन्छ
थिच्ने ठाउँ सारांशको पूरै लाइन — तीर मात्र नबनाउनुहोस्

अर्को

सूची पङ्क्ति जानकारी प्रदर्शन एप

सेटिङ सूची जानकारी प्रदर्शन एप

कार्ड सूची जानकारी प्रदर्शन एप

च्याट बबल जानकारी प्रदर्शन एप