Akordeon z redakcyjnym układem

<main class="edition"><header><span class="issue">Poradnik drukowania</span><h1>Pytania<br>o druk.</h1><p>Papier, spad i przygotowanie pliku.</p></header><section aria-label="Pytania i odpowiedzi">
<article><h2><button id="q1" aria-expanded="true" aria-controls="a1"><span>01</span> Jaki papier wybrać?<b aria-hidden="true">−</b></button></h2><div id="a1" class="answer">Papier niepowlekany nadaje się do notatek. Gładki papier powlekany lepiej pokazuje nasycone kolory fotografii.</div></article>
<article><h2><button id="q2" aria-expanded="false" aria-controls="a2"><span>02</span> Co to jest spad?<b aria-hidden="true">+</b></button></h2><div id="a2" class="answer" hidden>Spad to dodatkowy obszar grafiki poza linią cięcia. W tym przykładzie przyjmujemy 3 mm z każdej strony.</div></article>
<article><h2><button id="q3" aria-expanded="false" aria-controls="a3"><span>03</span> Jak przygotować plik?<b aria-hidden="true">+</b></button></h2><div id="a3" class="answer" hidden>Wyeksportuj PDF, osadź fonty i sprawdź wymiary strony. Zawsze potwierdź wymagania z wybraną drukarnią.</div></article>
</section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#fff7ed;--ink:#402a28;--focus:#af262b}.edition{max-width:950px;margin:auto;padding:38px;display:grid;grid-template-columns:1fr 1.2fr;gap:40px}.issue{display:block;color:#a5222b;border-top:5px solid;padding-top:10px;font-size:14px}h1{font-family:Georgia,serif;font-size:clamp(34px,4vw,52px);line-height:1.05;margin:28px 0 20px}header p{max-width:230px;color:#765a54}section{padding-top:22px}article{border-top:1px solid #bba49a}article:last-child{border-bottom:1px solid #bba49a}h2{margin:0}h2 button{display:flex;align-items:center;text-align:left;gap:16px;width:100%;border:0;background:transparent;color:inherit;padding:20px 0;font-size:17px;font-weight:600}h2 button span{font:14px monospace;color:#a5222b}h2 b{margin-left:auto;font-size:26px}.answer{padding:0 0 22px 32px;max-width:410px;font-size:15px}button[aria-expanded=true]{color:#a5222b}@media(max-width:600px){.edition{padding:24px;grid-template-columns:1fr;gap:0}h1{margin:16px 0}section{padding-top:5px}header p{max-width:none}}

(()=>{
$('h2 button').on('click',function(){const opening=$(this).attr('aria-expanded')!=='true';$('h2 button').attr('aria-expanded','false').find('b').text('+');$('.answer').prop('hidden',true);if(opening){$(this).attr('aria-expanded','true').find('b').text('−');$('#'+this.getAttribute('aria-controls')).prop('hidden',false);}});
})();