대화형 상품 속성

<div class="cf"><div class="cf-question">QUESTION: FITS A SMALL DESK?</div><div class="cf-fields"><div>TITLE <b>ARC LIGHT</b></div><div>PRICE <b>$39</b></div><div class="extra">USE <b>SMALL DESKS</b></div><div class="extra">COMPATIBLE <b>USB-C</b></div></div><div class="cf-answer" id="cf-answer">ANSWER: NOT ENOUGH DATA</div><button type="button">ADD QUESTION ATTRIBUTES →</button></div>

.cf{width:min(91%,510px);font:700 clamp(10px,1vw,14px)/1.2 sans-serif}.cf-question{background:var(--fg);color:var(--bg);padding:clamp(7px,1.5vmin,13px)}.cf-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:6px 0}.cf-fields div{border:1px solid var(--line);background:var(--surface);padding:clamp(6px,1.3vmin,11px);color:var(--muted)}.cf-fields b{display:block;color:var(--fg);margin-top:3px}.cf-fields .extra{opacity:.25;transition:.5s}.cf.ready .extra{opacity:1;border-color:var(--accent)}.cf-answer{padding:clamp(7px,1.5vmin,13px);border:2px solid var(--line);color:var(--muted)}.cf.ready .cf-answer{border-color:var(--accent);color:var(--accent)}.cf button{border:0;background:var(--fg);color:var(--bg);padding:7px;margin-top:5px;font:inherit;cursor:pointer}

const root=document.querySelector('.cf'),answer=document.querySelector('#cf-answer'),button=root.querySelector('button');function toggle(){const ready=root.classList.toggle('ready');answer.textContent=ready?'ANSWER: YES · SMALL DESKS':'ANSWER: NOT ENOUGH DATA';button.textContent=ready?'SHOW BASIC FEED →':'ADD QUESTION ATTRIBUTES →'}button.addEventListener('click',toggle);setTimeout(toggle,700);setInterval(toggle,3800);