Repository Public
1<!--2 ============================================================3 SVGarden — https://www.svgarden.dev4 Author : Simon-Pierre Boucher5 Contact: contact@spboucher.ai6 File : snippets/interactive/accordion-chevron-morph.html7 Desc : details/summary accordion — chevron flips, content unclips8 ============================================================9-->10<!--svgarden11title: Accordion chevron morph12slug: accordion-chevron-morph13category: interactive14tags: [interactive, accordion, details, disclosure]15difficulty: intermediate16techniques: [details-element, "[open]", "clip-path", "@keyframes", ":focus-visible"]17how_it_works: >18 The disclosure state lives in the native <details> element — the browser19 toggles its [open] attribute, remembers it, and wires up mouse, keyboard and20 screen-reader semantics with zero script. CSS watches [open] to flip the21 chevron with a scaleY(-1) transform (a transform "morph", no attribute22 rewriting needed) and to run a reveal keyframe on the body that animates23 clip-path from a fully-clipped inset to none. Clip is used deliberately:24 height: auto can't be transitioned, but a freshly-matching [open] selector25 restarts an animation every time, so opening always sweeps in — closing26 snaps shut natively, which reads as intentional.27customizable:28 - { var: "--sg-color", label: "Accent", type: color, default: "#7F77DD" }29 - { var: "--sg-size", label: "Width", type: range, min: 220, max: 460, default: 300, unit: px }30 - { var: "--sg-duration", label: "Speed", type: range, min: 0.15, max: 1, step: 0.05, default: 0.35, unit: s }31created: 2026-08-1032-->33<div class="sg-accordion-chevron-morph" style="--sg-color:#7F77DD; --sg-size:300px; --sg-duration:0.35s;">34 <details class="sg-accordion-chevron-morph-item">35 <summary class="sg-accordion-chevron-morph-head">36 Why one file per snippet?37 <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">38 <polyline points="7 10, 12 15, 17 10" />39 </svg>40 </summary>41 <div class="sg-accordion-chevron-morph-body">42 <p>Adding an animation means adding one file — the gallery, search index and category pages regenerate themselves at build time.</p>43 </div>44 </details>45 <details class="sg-accordion-chevron-morph-item">46 <summary class="sg-accordion-chevron-morph-head">47 Why <details> instead of JS?48 <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">49 <polyline points="7 10, 12 15, 17 10" />50 </svg>51 </summary>52 <div class="sg-accordion-chevron-morph-body">53 <p>The element ships with state, keyboard handling and accessibility built in. CSS only decorates what the browser already does.</p>54 </div>55 </details>56</div>57<style>58 .sg-accordion-chevron-morph {59 width: var(--sg-size);60 border: 1px solid rgba(128, 128, 128, 0.35);61 border-radius: 10px;62 overflow: hidden;63 font-size: 0.95rem;64 }65 .sg-accordion-chevron-morph-item + .sg-accordion-chevron-morph-item {66 border-top: 1px solid rgba(128, 128, 128, 0.35);67 }68 .sg-accordion-chevron-morph-head {69 display: flex;70 align-items: center;71 justify-content: space-between;72 gap: 0.75rem;73 padding: 0.7rem 0.9rem;74 font-weight: 600;75 cursor: pointer;76 list-style: none;77 user-select: none;78 }79 .sg-accordion-chevron-morph-head::-webkit-details-marker { display: none; }80 .sg-accordion-chevron-morph-head:hover { color: var(--sg-color); }81 .sg-accordion-chevron-morph-head:focus-visible {82 outline: 2px solid var(--sg-color);83 outline-offset: -2px;84 border-radius: 8px;85 }86 .sg-accordion-chevron-morph-head svg {87 width: 1.15em;88 height: 1.15em;89 flex: none;90 }91 .sg-accordion-chevron-morph-head polyline {92 fill: none;93 stroke: var(--sg-color);94 stroke-width: 2.4;95 stroke-linecap: round;96 stroke-linejoin: round;97 transform-box: fill-box;98 transform-origin: center;99 transition: transform var(--sg-duration) ease;100 }101 .sg-accordion-chevron-morph-item[open] polyline {102 transform: scaleY(-1);103 }104 .sg-accordion-chevron-morph-body {105 padding: 0 0.9rem 0.8rem;106 }107 .sg-accordion-chevron-morph-body p {108 margin: 0;109 opacity: 0.8;110 line-height: 1.5;111 }112 .sg-accordion-chevron-morph-item[open] .sg-accordion-chevron-morph-body {113 animation: sg-accordion-chevron-morph-reveal var(--sg-duration) ease;114 }115 @keyframes sg-accordion-chevron-morph-reveal {116 from {117 clip-path: inset(0 0 100% 0);118 translate: 0 -6px;119 opacity: 0;120 }121 to {122 clip-path: inset(0);123 translate: 0 0;124 opacity: 1;125 }126 }127</style>128