Блок «Вопрос-ответ» для сайта автосервиса

<section class="vbvav">
  <div class="vbvav-wrap">
    <div class="vbvav-head">
      <h2 class="vbvav-h2">Вопросы, которые задают на приёмке</h2>
      <p class="vbvav-lead">Восемь тем, по которым чаще всего звонят перед визитом. Откройте нужный вопрос или оставьте только свой раздел.</p>
    </div>

    <div class="vbvav-filter">
      <button type="button" class="vbvav-chip is-on" data-cat="all">Все вопросы</button>
      <button type="button" class="vbvav-chip" data-cat="zap">Запись и сроки</button>
      <button type="button" class="vbvav-chip" data-cat="rab">Работы и запчасти</button>
      <button type="button" class="vbvav-chip" data-cat="opl">Деньги</button>
    </div>

    <ul class="vbvav-list">
      <li class="vbvav-item" data-cat="zap">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">01</span><span class="vbvav-txt">Нужно записываться заранее или можно просто приехать?</span></button></h3>
        <div class="vbvav-a"><div><p>На диагностику берём по записи, ближайшее свободное время обычно через день или два. Замену масла, колодок и ламп делаем в порядке живой очереди, в будни ожидание редко доходит до сорока минут. Время в записи держим за вами: если мастер задерживается, звоним заранее и предлагаем другой слот.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="rab">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">02</span><span class="vbvav-txt">Возьмёте машину, если запчасти я привезу свои?</span></button></h3>
        <div class="vbvav-a"><div><p>Возьмём. При вас сверяем каталожный номер и комплектность, после этого ставим. Гарантия в таком случае покрывает работу мастера, ответственность за саму деталь остаётся на продавце. Если по номеру видно, что запчасть не подойдёт к вашему двигателю, скажем об этом до разбора.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="rab">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">03</span><span class="vbvav-txt">Какая гарантия на выполненные работы?</span></button></h3>
        <div class="vbvav-a"><div><p>На работы 12 месяцев или 20 000 километров пробега, считаем по тому, что наступит раньше. На узлы, собранные из наших запчастей, срок совпадает с гарантией поставщика и вынесен в заказ-наряд отдельной строкой. Гарантийный случай разбираем за свой счёт и берём машину вне очереди.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="opl">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">04</span><span class="vbvav-txt">Сколько стоит диагностика и уходит ли она в зачёт ремонта?</span></button></h3>
        <div class="vbvav-a"><div><p>Компьютерная диагностика стоит 1 500 рублей, проверка ходовой части на подъёмнике 1 200 рублей. Если ремонт делаете у нас, эта сумма вычитается из итога работ. Заключение отдаём распечаткой с кодами ошибок и пояснением, с ним можно уехать в любой другой сервис.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="rab">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">05</span><span class="vbvav-txt">Что ставите: оригинал или аналог?</span></button></h3>
        <div class="vbvav-a"><div><p>В предложении показываем обе позиции с ценой и сроком поставки, выбор остаётся за владельцем. По ремню ГРМ, цепи и тормозным дискам советуем оригинал либо заводского поставщика, по фильтрам и расходникам разница в цене обычно не окупается. В заказ-наряде фиксируем номер той детали, которая реально встала в машину.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="zap">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">06</span><span class="vbvav-txt">Сколько времени занимает ремонт?</span></button></h3>
        <div class="vbvav-a"><div><p>Плановое обслуживание закрываем за 2-3 часа, тормозной контур или сцепление за один день. Ремонт двигателя и коробки идёт от трёх дней, часть узлов уходит на промер к профильному мастеру. Срок называем после диагностики и вписываем в заказ-наряд, при сдвиге предупреждаем в тот же день.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="opl">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">07</span><span class="vbvav-txt">Как проходит оплата?</span></button></h3>
        <div class="vbvav-a"><div><p>Картой, переводом или наличными в кассе после приёмки работ. На заказ дорогих деталей берём предоплату по счёту, её размер виден в предложении до оформления заказа. Организациям выставляем счёт с закрывающими документами, оплата по нему проходит в течение трёх рабочих дней.</p></div></div>
      </li>
      <li class="vbvav-item" data-cat="zap">
        <h3><button type="button" class="vbvav-q" aria-expanded="false"><span class="vbvav-num" aria-hidden="true">08</span><span class="vbvav-txt">Можно остаться и посмотреть, что делают с машиной?</span></button></h3>
        <div class="vbvav-a"><div><p>Можно. В цехе есть зона ожидания с окном на пост, там же вода и розетка. В рабочую зону пускаем в жилете и закрытой обуви, это требование техники безопасности. Когда ждать некогда, мастер снимает узловые моменты на видео и отправляет их в мессенджер.</p></div></div>
      </li>
    </ul>

    <p class="vbvav-foot">Своего вопроса не нашли? Напишите мастеру-приёмщику: <a class="vbvav-link" href="#kontakty">разберём по вашей машине</a></p>
  </div>
</section>

<style>
.vbvav, .vbvav *, .vbvav *::before, .vbvav *::after { box-sizing: border-box; }
.vbvav {
  --acc: #ff8a1f; --acc-dark: #e8760f; --bg: #f6f6f7; --panel: #fff; --ink: #17191c; --muted: #62676e; --line: #e4e6e9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbvav-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvav-head { margin-bottom: clamp(20px, 2.6vw, 30px); }
.vbvav-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvav-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 42em; }

.vbvav-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.2vw, 26px); }
.vbvav-chip { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; line-height: 1.2;
  background: var(--panel) !important; color: var(--muted) !important; transition: border-color .18s ease, color .18s ease; }
.vbvav-chip:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbvav-chip.is-on { border-color: var(--ink); background: var(--ink) !important; color: #fff !important; }

.vbvav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vbvav-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .18s ease; }
.vbvav-item.is-hidden { display: none; }
.vbvav-item:hover { border-color: #cfd3d8; }
.vbvav-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvav-q { display: flex; align-items: flex-start; gap: 14px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
  background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; text-align: left;
  padding: clamp(16px, 1.8vw, 20px) clamp(16px, 2vw, 24px); transition: color .18s ease; }
.vbvav-q:hover .vbvav-txt { color: var(--acc-dark); }
.vbvav-num { flex: 0 0 auto; font-family: var(--fh); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--acc); padding-top: 4px; }
.vbvav-txt { flex: 1 1 auto; font-family: var(--fh); font-size: clamp(16px, 1.4vw, 18.5px); font-weight: 600; line-height: 1.4; transition: color .18s ease; }
.vbvav-q::after { content: ''; flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--bg);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 10px 1.6px, 1.6px 10px; background-position: center, center; background-repeat: no-repeat;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .18s ease; }
.vbvav-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvav-a { max-height: 0; overflow: hidden; transition: max-height .34s cubic-bezier(.22,1,.36,1); }
.vbvav-a > div { padding: 0 clamp(16px, 2vw, 24px) clamp(18px, 2vw, 22px) clamp(44px, 4.4vw, 56px); }
.vbvav-a p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--muted); max-width: 46em; }

.vbvav-foot { margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vbvav-link, .vbvav-link:link, .vbvav-link:visited { color: var(--acc-dark) !important; text-decoration: underline; }
.vbvav-link:hover { color: var(--ink) !important; }

@media (max-width: 560px) {
  .vbvav-a > div { padding-left: clamp(16px, 4vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .vbvav-a, .vbvav-q::after, .vbvav-chip, .vbvav-item { transition: none !important; }
}
</style>

<script>
(function () {
  var ONE_OPEN = true;   /* true - открыт один ответ; false - можно раскрыть несколько */

  var roots = document.querySelectorAll('.vbvav');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var items = Array.prototype.slice.call(root.querySelectorAll('.vbvav-item'));
    var chips = Array.prototype.slice.call(root.querySelectorAll('.vbvav-chip'));

    function close(item) {
      item.querySelector('.vbvav-q').setAttribute('aria-expanded', 'false');
      item.querySelector('.vbvav-a').style.maxHeight = '0px';
    }
    function open(item) {
      var panel = item.querySelector('.vbvav-a');
      item.querySelector('.vbvav-q').setAttribute('aria-expanded', 'true');
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }

    items.forEach(function (item) {
      var btn = item.querySelector('.vbvav-q');
      btn.addEventListener('click', function () {
        var isOpen = btn.getAttribute('aria-expanded') === 'true';
        if (ONE_OPEN) items.forEach(close);
        if (!isOpen) open(item); else close(item);
      });
    });

    chips.forEach(function (chip) {
      chip.addEventListener('click', function () {
        var cat = chip.getAttribute('data-cat');
        chips.forEach(function (c) { c.classList.remove('is-on'); });
        chip.classList.add('is-on');
        items.forEach(function (item) {
          var show = cat === 'all' || item.getAttribute('data-cat') === cat;
          item.classList.toggle('is-hidden', !show);
          if (!show) close(item);
        });
      });
    });

    window.addEventListener('resize', function () {
      items.forEach(function (item) {
        var panel = item.querySelector('.vbvav-a');
        if (item.querySelector('.vbvav-q').getAttribute('aria-expanded') === 'true') panel.style.maxHeight = panel.scrollHeight + 'px';
      });
    });
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.