Блок «Вопрос-ответ» с поиском для клиники
FAQ с живым поиском: посетитель вводит «наркоз» или «рассрочка» и сразу видит нужные вопросы. Подходит, когда вопросов больше пятнадцати.
<section class="vbvok">
<div class="vbvok-wrap">
<h2 class="vbvok-h2">Вопросы пациентов</h2>
<p class="vbvok-lead">Двадцать самых частых. Введите слово — например «наркоз», «рассрочка» или «беременность» — и увидите только нужное.</p>
<div class="vbvok-search">
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M13.5 13.5L17 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<input type="search" id="vbvok-q" placeholder="Поиск по вопросам и ответам" aria-label="Поиск по вопросам">
<button type="button" class="vbvok-clear" id="vbvok-clear" aria-label="Очистить поиск" hidden>×</button>
</div>
<p class="vbvok-count" id="vbvok-count" aria-live="polite"></p>
<ul class="vbvok-list" id="vbvok-list">
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Больно ли лечить зуб под анестезией?</button></h3><div class="vbvok-a"><div><p>Сама анестезия ставится тонкой иглой после аппликационного геля — укола вы не почувствуете. Дальше лечение проходит без боли. Если чувствительность возвращается, врач добавляет анестетик, об этом достаточно поднять руку.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Можно лечить зубы при беременности?</button></h3><div class="vbvok-a"><div><p>Можно и нужно, оптимальный срок — второй триместр. Используем анестетики без адреналина, разрешённые беременным. Рентген делаем только по строгим показаниям, с защитным фартуком и на визиографе с минимальной дозой.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Что такое лечение под наркозом и кому оно нужно?</button></h3><div class="vbvok-a"><div><p>Это медикаментозный сон под контролем анестезиолога. Показан при выраженной дентофобии, большом объёме работ за один визит и детям младшего возраста. Требуется предварительное обследование: анализы, ЭКГ и консультация анестезиолога.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Есть ли рассрочка на лечение?</button></h3><div class="vbvok-a"><div><p>Да, рассрочка на срок до 12 месяцев без переплаты, оформляется в клинике за 15 минут по паспорту. Для комплексного лечения и имплантации доступна беспроцентная рассрочка от банка-партнёра.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Можно ли получить налоговый вычет за лечение?</button></h3><div class="vbvok-a"><div><p>Да, 13% от суммы лечения. Мы готовим полный пакет: договор, чеки и справку об оплате медицинских услуг установленной формы. Заявку на документы оставляйте у администратора, готовим за три рабочих дня.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Сколько служит пломба?</button></h3><div class="vbvok-a"><div><p>Композитная пломба при правильном уходе служит 5–7 лет, вкладка из керамики — от 10 лет. Гарантия клиники на пломбу — 2 года при условии профессиональной гигиены раз в полгода.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Как часто нужна профессиональная гигиена?</button></h3><div class="vbvok-a"><div><p>Раз в шесть месяцев большинству пациентов. Курящим, носителям брекетов и людям с пародонтитом — раз в три-четыре месяца. Процедура занимает около часа и включает ультразвук, Air Flow и полировку.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Отбеливание портит эмаль?</button></h3><div class="vbvok-a"><div><p>Современные системы не разрушают эмаль: гель действует на пигмент внутри дентина. Временная чувствительность в первые двое суток — норма. Противопоказания: незалеченный кариес, трещины эмали, возраст до 18 лет.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Что делать, если зуб заболел ночью?</button></h3><div class="vbvok-a"><div><p>Прополощите тёплым раствором соли, примите обезболивающее из домашней аптечки и не грейте щёку — тепло усиливает воспаление. Утром звоните: на острую боль мы принимаем в день обращения, вне очереди.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Сколько стоит имплантация под ключ?</button></h3><div class="vbvok-a"><div><p>Имплант с коронкой — от 55 000 ₽ за корейские системы и от 89 000 ₽ за премиальные швейцарские. В сумму входит хирургический этап, формирователь, абатмент и коронка. Костная пластика считается отдельно после КТ.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Приживается ли имплант не у всех?</button></h3><div class="vbvok-a"><div><p>Статистика приживаемости — около 98%. Риск повышают курение, некомпенсированный диабет и несоблюдение рекомендаций после операции. При отторжении по нашей вине переустанавливаем имплант бесплатно.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Брекеты или элайнеры — что выбрать?</button></h3><div class="vbvok-a"><div><p>Элайнеры незаметны и снимаются, но требуют дисциплины: носить 22 часа в сутки. Брекеты работают без участия пациента и справляются со сложными случаями. Решение принимается после снимка и расчёта модели.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">С какого возраста вести ребёнка к стоматологу?</button></h3><div class="vbvok-a"><div><p>Первый визит — к году, для знакомства и осмотра. Дальше раз в полгода. Детский приём ведёт отдельный врач, первый визит адаптационный: без лечения, только знакомство с креслом и инструментами.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Нужно ли лечить молочные зубы?</button></h3><div class="vbvok-a"><div><p>Обязательно. Кариес молочного зуба переходит на зачаток постоянного и вызывает воспаление. Ранняя потеря молочного зуба нарушает прикус: соседние зубы смещаются, и постоянному не хватает места.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Делаете ли вы снимок КТ?</button></h3><div class="vbvok-a"><div><p>Да, компьютерный томограф стоит в клинике. Снимок делается за 20 секунд, результат врач видит сразу и разбирает его вместе с вами на экране. Записываем снимок на диск или отправляем ссылкой.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Можно ли прийти со своим планом лечения от другой клиники?</button></h3><div class="vbvok-a"><div><p>Конечно. Второе мнение — нормальная практика. Мы посмотрим снимки, при необходимости сделаем свои и честно скажем, где согласны с коллегами, а где предложили бы другой подход и почему.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Что если стоимость лечения вырастет по ходу?</button></h3><div class="vbvok-a"><div><p>План лечения и смета согласовываются до начала работ и фиксируются в договоре. Если в процессе выясняются новые обстоятельства, врач останавливается и обсуждает изменения с вами, а не ставит перед фактом на кассе.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Работаете ли вы по ОМС и ДМС?</button></h3><div class="vbvok-a"><div><p>По ОМС — нет, клиника частная. По ДМС работаем с рядом страховых компаний, список уточняйте у администратора: нужно назвать вашу страховую и программу, чтобы проверить, входит ли в неё нужная услуга.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Сколько длится первичная консультация?</button></h3><div class="vbvok-a"><div><p>Около 40 минут: осмотр, снимок при необходимости, объяснение ситуации и составление плана с ценами. Консультация бесплатна и ни к чему не обязывает — план лечения вы забираете с собой.</p></div></div></li>
<li class="vbvok-item"><h3><button type="button" class="vbvok-q" aria-expanded="false">Как записаться на приём?</button></h3><div class="vbvok-a"><div><p>Позвонить, написать в мессенджер или оставить заявку на сайте. Администратор перезванивает в течение 15 минут в рабочее время и подбирает время с учётом нужного врача и объёма работ.</p></div></div></li>
</ul>
<div class="vbvok-empty" id="vbvok-empty" hidden>
<p>По этому слову ничего не нашлось. Спросите напрямую — ответим в течение дня.</p>
<a class="vbvok-ask" href="#zapis">Задать свой вопрос</a>
</div>
</div>
</section>
<style>
.vbvok, .vbvok *, .vbvok *::before, .vbvok *::after { box-sizing: border-box; }
.vbvok {
--acc: #1c7f8c; --ink: #1d2b2e; --muted: #5f7276; --line: #dfe8e9; --soft: #f2f7f7;
--f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
--fh: var(--t-headline-font, var(--f));
background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbvok-wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvok-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvok-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
.vbvok-search { position: relative; margin-bottom: 10px; }
.vbvok-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.vbvok-search input { width: 100%; height: 56px; padding: 0 48px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
border: 1.5px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--ink); }
.vbvok-search input:focus { outline: 2px solid var(--acc); outline-offset: -2px; background: #fff; }
.vbvok-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; margin: 0;
-webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 50%; background: #fff !important; color: var(--muted) !important; font-size: 20px; line-height: 1; }
.vbvok-count { font-size: 13px; color: var(--muted); margin: 0 0 18px; min-height: 18px; }
.vbvok-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vbvok-item { border-bottom: 1px solid var(--line); }
.vbvok-item[hidden] { display: none; }
.vbvok-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvok-q { display: flex; align-items: flex-start; gap: 16px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; font-family: var(--fh);
font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.4; text-align: left; padding: 19px 0; transition: color .18s ease; }
.vbvok-q:hover { color: var(--acc) !important; }
.vbvok-q::after { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; margin-left: auto;
background: linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat, linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbvok-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvok-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.vbvok-a > div { padding: 0 34px 20px 0; }
.vbvok-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.vbvok-hl { background: #ffeaa7; border-radius: 3px; padding: 0 2px; }
.vbvok-empty { text-align: center; padding: 40px 0 0; }
.vbvok-empty p { margin: 0 0 16px; font-size: 16px; color: var(--muted); }
.vbvok-ask, .vbvok-ask:link, .vbvok-ask:visited, .vbvok-ask:active, .vbvok-ask:focus { display: inline-flex; align-items: center; justify-content: center;
min-height: 52px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600;
background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbvok-ask:hover { background: #166874; color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .vbvok * { transition: none !important; } }
</style>
<script>
(function () {
var roots = document.querySelectorAll('.vbvok');
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('.vbvok-item'));
var input = root.querySelector('#vbvok-q'), clear = root.querySelector('#vbvok-clear');
var count = root.querySelector('#vbvok-count'), empty = root.querySelector('#vbvok-empty');
items.forEach(function (item) {
item.__q = item.querySelector('.vbvok-q');
item.__a = item.querySelector('.vbvok-a');
item.__qHtml = item.__q.innerHTML;
item.__aHtml = item.__a.querySelector('p').innerHTML;
item.__text = (item.__q.textContent + ' ' + item.__a.textContent).toLowerCase();
item.__q.addEventListener('click', function () {
var open = item.__q.getAttribute('aria-expanded') === 'true';
items.forEach(function (o) { o.__q.setAttribute('aria-expanded', 'false'); o.__a.style.maxHeight = '0px'; });
if (!open) { item.__q.setAttribute('aria-expanded', 'true'); item.__a.style.maxHeight = item.__a.scrollHeight + 'px'; }
});
});
function escRe(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
function mark(html, needle) {
if (!needle) return html;
var re = new RegExp('(' + escRe(needle) + ')', 'gi');
return html.replace(re, '<mark class="vbvok-hl">$1<\/mark>');
}
function render() {
var needle = (input.value || '').trim().toLowerCase();
clear.hidden = !needle;
var shown = 0;
items.forEach(function (item) {
var ok = !needle || item.__text.indexOf(needle) !== -1;
item.hidden = !ok;
if (ok) {
shown++;
item.__q.innerHTML = mark(item.__qHtml, needle);
item.__a.querySelector('p').innerHTML = mark(item.__aHtml, needle);
}
item.__q.setAttribute('aria-expanded', 'false');
item.__a.style.maxHeight = '0px';
});
empty.hidden = shown !== 0;
count.textContent = needle ? 'Найдено: ' + shown + ' из ' + items.length : '';
}
var t;
input.addEventListener('input', function () { clearTimeout(t); t = setTimeout(render, 130); });
clear.addEventListener('click', function () { input.value = ''; render(); input.focus(); });
render();
}
})();
</script>Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.