UI Components Easy
Vet — Vet FAQ
A friendly veterinary help center with a live search filter and grouped, keyboard-accessible FAQ accordions covering appointments, vaccines, emergencies, billing and boarding, plus an empty-result state and a contact-us card with phone, email and hours for reaching the clinic team.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--teal: #179c8e;
--teal-d: #0f7f73;
--teal-50: #e6f5f2;
--coral: #ff8a5c;
--ink: #173a36;
--muted: #6b827e;
--bg: #f2f8f6;
--white: #ffffff;
--line: #d9ebe7;
--radius: 18px;
--radius-lg: 26px;
--shadow: 0 10px 30px rgba(15, 127, 115, 0.10);
--shadow-sm: 0 4px 14px rgba(15, 127, 115, 0.08);
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.page {
max-width: 960px;
margin: 0 auto;
padding: 40px 20px 64px;
}
/* Hero + search */
.hero {
text-align: center;
margin-bottom: 28px;
}
.hero__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
font-size: 28px;
background: var(--teal-50);
border-radius: 50%;
margin-bottom: 14px;
}
.hero__title {
font-size: clamp(1.5rem, 4vw, 2.1rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.hero__sub {
color: var(--muted);
margin-top: 8px;
font-size: 1.02rem;
}
.search {
position: relative;
display: flex;
align-items: center;
max-width: 520px;
margin: 24px auto 10px;
}
.search__icon {
position: absolute;
left: 18px;
font-size: 1rem;
pointer-events: none;
}
.search__input {
width: 100%;
font-family: var(--font);
font-size: 1rem;
color: var(--ink);
background: var(--white);
border: 2px solid var(--line);
border-radius: 999px;
padding: 14px 46px 14px 46px;
box-shadow: var(--shadow-sm);
transition: border-color 0.18s, box-shadow 0.18s;
}
.search__input::placeholder {
color: #9bb3ad;
}
.search__input:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 4px var(--teal-50);
}
.search__clear {
position: absolute;
right: 12px;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: var(--teal-50);
color: var(--teal-d);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: background 0.16s;
}
.search__clear:hover {
background: #d3ece7;
}
.search__count {
color: var(--muted);
font-size: 0.85rem;
font-weight: 500;
}
/* Layout */
.layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 22px;
align-items: start;
}
/* Groups + items */
.group {
margin-bottom: 22px;
}
.group__title {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--teal-d);
margin: 4px 4px 12px;
}
.group__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 15px;
background: var(--teal-50);
border-radius: 10px;
}
.item {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: border-color 0.18s, box-shadow 0.18s;
}
.item.is-open {
border-color: var(--teal);
box-shadow: var(--shadow);
}
.item__heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.item__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
text-align: left;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
color: var(--ink);
padding: 16px 18px;
}
.item__btn:focus-visible {
outline: 3px solid var(--teal);
outline-offset: -3px;
border-radius: var(--radius);
}
.item__q {
flex: 1;
}
.item__chev {
flex-shrink: 0;
color: var(--teal);
font-size: 1.3rem;
line-height: 1;
transition: transform 0.22s ease;
}
.item.is-open .item__chev {
transform: rotate(180deg);
}
.item__panel {
padding: 0 18px 16px;
color: var(--muted);
font-size: 0.95rem;
}
.item__panel p {
border-top: 1px dashed var(--line);
padding-top: 12px;
}
/* hidden groups during search */
.group[hidden],
.item[hidden] {
display: none;
}
/* highlight matches */
mark {
background: #ffe1ce;
color: var(--ink);
border-radius: 4px;
padding: 0 2px;
}
/* empty state */
.empty {
text-align: center;
color: var(--muted);
background: var(--white);
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: 34px 20px;
font-size: 0.96rem;
}
.empty__icon {
display: block;
font-size: 34px;
margin-bottom: 8px;
}
/* contact card */
.contact {
position: sticky;
top: 20px;
background: linear-gradient(160deg, var(--teal) 0%, var(--teal-d) 100%);
color: var(--white);
border-radius: var(--radius-lg);
padding: 24px 22px;
box-shadow: var(--shadow);
}
.contact__paw {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 20px;
background: rgba(255, 255, 255, 0.18);
border-radius: 12px;
margin-bottom: 12px;
}
.contact__title {
font-size: 1.18rem;
font-weight: 700;
}
.contact__lead {
font-size: 0.9rem;
opacity: 0.9;
margin-top: 6px;
}
.contact__list {
list-style: none;
margin: 18px 0;
display: grid;
gap: 12px;
}
.contact__list li {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact__k {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
opacity: 0.75;
font-weight: 600;
}
.contact__list a,
.contact__list span:not(.contact__k) {
color: var(--white);
font-weight: 600;
font-size: 0.98rem;
text-decoration: none;
}
.contact__list a:hover,
.contact__list a:focus-visible {
text-decoration: underline;
}
.contact__cta {
display: block;
text-align: center;
background: var(--coral);
color: var(--white);
font-weight: 700;
text-decoration: none;
padding: 12px;
border-radius: 999px;
margin-top: 6px;
transition: transform 0.15s, filter 0.15s;
}
.contact__cta:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.contact__cta:focus-visible {
outline: 3px solid var(--white);
outline-offset: 2px;
}
@media (max-width: 520px) {
.page {
padding: 28px 14px 48px;
}
.layout {
grid-template-columns: 1fr;
}
.contact {
position: static;
order: -1;
margin-bottom: 8px;
}
.item__btn {
font-size: 0.96rem;
padding: 14px 14px;
}
}(function () {
'use strict';
var search = document.getElementById('faqSearch');
var clearBtn = document.getElementById('searchClear');
var countEl = document.getElementById('searchCount');
var emptyEl = document.getElementById('emptyState');
var groups = Array.prototype.slice.call(document.querySelectorAll('[data-group]'));
var items = Array.prototype.slice.call(document.querySelectorAll('[data-item]'));
var buttons = Array.prototype.slice.call(document.querySelectorAll('.item__btn'));
/* ---- Accordion toggling ---- */
function toggle(btn) {
var item = btn.closest('[data-item]');
var panel = document.getElementById(btn.getAttribute('aria-controls'));
var open = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!open));
item.classList.toggle('is-open', !open);
if (open) {
panel.hidden = true;
} else {
panel.hidden = false;
}
}
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
toggle(btn);
});
});
/* ---- Keyboard navigation between headers ---- */
document.querySelector('.faq').addEventListener('keydown', function (e) {
var current = document.activeElement;
if (!current || !current.classList.contains('item__btn')) return;
var visible = buttons.filter(function (b) {
return !b.closest('[data-item]').hidden && b.offsetParent !== null;
});
var idx = visible.indexOf(current);
if (idx === -1) return;
if (e.key === 'ArrowDown') {
e.preventDefault();
(visible[idx + 1] || visible[0]).focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
(visible[idx - 1] || visible[visible.length - 1]).focus();
} else if (e.key === 'Home') {
e.preventDefault();
visible[0].focus();
} else if (e.key === 'End') {
e.preventDefault();
visible[visible.length - 1].focus();
}
});
/* ---- Highlight helper ---- */
function setText(el, text, term) {
if (!term) {
el.textContent = text;
return;
}
var lower = text.toLowerCase();
var i = lower.indexOf(term);
if (i === -1) {
el.textContent = text;
return;
}
el.textContent = '';
el.appendChild(document.createTextNode(text.slice(0, i)));
var mark = document.createElement('mark');
mark.textContent = text.slice(i, i + term.length);
el.appendChild(mark);
el.appendChild(document.createTextNode(text.slice(i + term.length)));
}
/* cache original text */
items.forEach(function (item) {
var q = item.querySelector('.item__q');
var p = item.querySelector('.item__panel p');
item._q = q.textContent;
item._a = p.textContent;
item._qEl = q;
item._pEl = p;
item._hay = (item._q + ' ' + item._a).toLowerCase();
});
/* ---- Live search filter ---- */
function filter() {
var term = search.value.trim().toLowerCase();
clearBtn.hidden = term.length === 0;
var visible = 0;
items.forEach(function (item) {
var hit = term === '' || item._hay.indexOf(term) !== -1;
item.hidden = !hit;
if (hit) {
visible++;
setText(item._qEl, item._q, term);
setText(item._pEl, item._a, term);
} else {
item._qEl.textContent = item._q;
item._pEl.textContent = item._a;
}
});
groups.forEach(function (group) {
var anyVisible = group.querySelector('[data-item]:not([hidden])');
group.hidden = !anyVisible;
});
emptyEl.hidden = visible !== 0;
if (term === '') {
countEl.textContent = items.length + ' questions';
} else {
countEl.textContent =
visible === 0
? 'No matches'
: visible + (visible === 1 ? ' match' : ' matches') + ' for “' + search.value.trim() + '”';
}
}
search.addEventListener('input', filter);
clearBtn.addEventListener('click', function () {
search.value = '';
filter();
search.focus();
});
search.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && search.value) {
e.preventDefault();
search.value = '';
filter();
}
});
filter();
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vet FAQ — Pawsby Animal Clinic</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page">
<header class="hero">
<span class="hero__badge" aria-hidden="true">🐾</span>
<h1 class="hero__title">How can we help your companion?</h1>
<p class="hero__sub">Answers to the questions our pet parents ask most at Pawsby Animal Clinic.</p>
<div class="search">
<span class="search__icon" aria-hidden="true">🔍</span>
<label class="sr-only" for="faqSearch">Search frequently asked questions</label>
<input
type="search"
id="faqSearch"
class="search__input"
placeholder="Search questions, e.g. vaccines, after hours, deposit…"
autocomplete="off"
/>
<button type="button" class="search__clear" id="searchClear" aria-label="Clear search" hidden>×</button>
</div>
<p class="search__count" id="searchCount" role="status" aria-live="polite">22 questions</p>
</header>
<div class="layout">
<section class="faq" aria-label="Frequently asked questions">
<!-- Appointments -->
<div class="group" data-group>
<h2 class="group__title"><span class="group__dot" aria-hidden="true">📅</span> Appointments</h2>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="a1" id="a1-h">
<span class="item__q">How do I book a routine check-up?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="a1" role="region" aria-labelledby="a1-h" hidden>
<p>You can book online through your owner portal, call us at (415) 555-0142, or stop by the front desk. Routine wellness visits run about 30 minutes — please arrive 10 minutes early for your first visit so we can set up a chart.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="a2" id="a2-h">
<span class="item__q">Can I reschedule or cancel my visit?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="a2" role="region" aria-labelledby="a2-h" hidden>
<p>Yes — please give us at least 24 hours' notice so another pet can take the slot. Same-day cancellations and no-shows may incur a $25 fee. You can manage appointments anytime in the portal.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="a3" id="a3-h">
<span class="item__q">Do you offer video consultations?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="a3" role="region" aria-labelledby="a3-h" hidden>
<p>We offer telehealth video calls for follow-ups, behavior questions and minor concerns. New patients and anything requiring hands-on examination still need an in-person visit. Video appointments are $45 and run about 15 minutes.</p>
</div>
</div>
</div>
<!-- Vaccines -->
<div class="group" data-group>
<h2 class="group__title"><span class="group__dot" aria-hidden="true">💉</span> Vaccines</h2>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="v1" id="v1-h">
<span class="item__q">Which vaccines does my puppy or kitten need?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="v1" role="region" aria-labelledby="v1-h" hidden>
<p>Puppies typically need a series of distemper/parvo (DHPP) shots every 3–4 weeks until 16 weeks, plus rabies. Kittens follow a similar FVRCP schedule plus rabies. Dr. Marlowe will tailor the plan to your pet's lifestyle and risk.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="v2" id="v2-h">
<span class="item__q">How often are booster shots needed?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="v2" role="region" aria-labelledby="v2-h" hidden>
<p>Most core vaccines are boosted every 1–3 years depending on the vaccine and local regulations. We'll send a reminder by text and email roughly two weeks before anything is due so nothing slips through the cracks.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="v3" id="v3-h">
<span class="item__q">Are there side effects after vaccination?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="v3" role="region" aria-labelledby="v3-h" hidden>
<p>Mild soreness, low energy or a slight fever for a day are normal. Call us right away if you notice facial swelling, hives, vomiting or trouble breathing — these can signal a rare allergic reaction that needs prompt care.</p>
</div>
</div>
</div>
<!-- Emergencies -->
<div class="group" data-group>
<h2 class="group__title"><span class="group__dot" aria-hidden="true">🚑</span> Emergencies</h2>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="e1" id="e1-h">
<span class="item__q">What counts as a veterinary emergency?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="e1" role="region" aria-labelledby="e1-h" hidden>
<p>Difficulty breathing, repeated vomiting, suspected poisoning, seizures, severe bleeding, a swollen or hard belly, or inability to urinate are all emergencies. When in doubt, call us — we'd rather hear from you early.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="e2" id="e2-h">
<span class="item__q">What are your after-hours options?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="e2" role="region" aria-labelledby="e2-h" hidden>
<p>After 7 PM and on holidays, our line forwards to BayArea Pet Emergency on Larkin Street, open 24/7 at (415) 555-0911. For poison concerns, the ASPCA Animal Poison Control line is (888) 426-4435.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="e3" id="e3-h">
<span class="item__q">Should I call before bringing my pet in?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="e3" role="region" aria-labelledby="e3-h" hidden>
<p>Yes, please call ahead if you safely can. A two-minute heads-up lets our team prepare equipment and clear a triage room so your pet is seen the moment you arrive. Drive carefully — your safety matters too.</p>
</div>
</div>
</div>
<!-- Billing -->
<div class="group" data-group>
<h2 class="group__title"><span class="group__dot" aria-hidden="true">💳</span> Billing</h2>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="b1" id="b1-h">
<span class="item__q">What payment methods do you accept?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="b1" role="region" aria-labelledby="b1-h" hidden>
<p>We accept all major cards, Apple Pay, cash and CareCredit. Payment is due at the time of service. For larger treatment plans we can split the estimate into milestones — just ask the front desk before the visit.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="b2" id="b2-h">
<span class="item__q">Do you accept pet insurance?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="b2" role="region" aria-labelledby="b2-h" hidden>
<p>We work with most major pet insurers including Trupanion, Healthy Paws and Nationwide. You pay us directly, then we provide an itemized invoice you submit for reimbursement. Trupanion members can sometimes use direct pay.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="b3" id="b3-h">
<span class="item__q">Can I get an estimate before treatment?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="b3" role="region" aria-labelledby="b3-h" hidden>
<p>Absolutely. For any procedure or dental we provide a written estimate with a low and high range before we begin, and we'll call you if anything during the visit would push the cost beyond what was approved.</p>
</div>
</div>
</div>
<!-- Boarding -->
<div class="group" data-group>
<h2 class="group__title"><span class="group__dot" aria-hidden="true">🏠</span> Boarding</h2>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="d1" id="d1-h">
<span class="item__q">What do I need to board my pet?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="d1" role="region" aria-labelledby="d1-h" hidden>
<p>We need proof of current rabies, DHPP and Bordetella vaccines, any medications in their original packaging, and your pet's regular food to avoid tummy upsets. Comfort items like a favorite blanket are always welcome.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="d2" id="d2-h">
<span class="item__q">What are check-in and check-out times?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="d2" role="region" aria-labelledby="d2-h" hidden>
<p>Check-in is 8 AM–11 AM and check-out is by 12 PM to give us time to bathe and settle each guest. A late pickup after noon adds one half-day at $18. Weekend pickups are available 9 AM–10 AM by appointment.</p>
</div>
</div>
<div class="item" data-item>
<h3 class="item__heading">
<button type="button" class="item__btn" aria-expanded="false" aria-controls="d3" id="d3-h">
<span class="item__q">Will I get updates while my pet stays?</span>
<span class="item__chev" aria-hidden="true">⌄</span>
</button>
</h3>
<div class="item__panel" id="d3" role="region" aria-labelledby="d3-h" hidden>
<p>Yes! Our Comfort and Deluxe boarding tiers include a daily photo or short video text so you can see your buddy enjoying playtime. You can also add a midday cuddle session or an enrichment walk for $12 each.</p>
</div>
</div>
</div>
<p class="empty" id="emptyState" hidden>
<span class="empty__icon" aria-hidden="true">🐶</span>
No questions match your search. Try a different word, or reach out below.
</p>
</section>
<aside class="contact" aria-label="Contact the clinic">
<span class="contact__paw" aria-hidden="true">🐾</span>
<h2 class="contact__title">Still need a hand?</h2>
<p class="contact__lead">Our care team is happy to help with anything not covered here.</p>
<ul class="contact__list">
<li><span class="contact__k">Call</span><a href="tel:+14155550142">(415) 555-0142</a></li>
<li><span class="contact__k">Email</span><a href="mailto:[email protected]">[email protected]</a></li>
<li><span class="contact__k">Hours</span><span>Mon–Sat, 8 AM – 7 PM</span></li>
<li><span class="contact__k">After hours</span><a href="tel:+14155550911">(415) 555-0911</a></li>
</ul>
<a class="contact__cta" href="mailto:[email protected]">Send us a message</a>
</aside>
</div>
</main>
<script src="script.js"></script>
</body>
</html>Vet FAQ
A warm, approachable help center for a veterinary clinic. Questions are organized into five groups — Appointments, Vaccines, Emergencies, Billing and Boarding — each rendered as an accessible accordion you can open with mouse or keyboard.
A live search box filters every question and answer as you type, dimming empty groups and showing
a tidy “no matches” state when nothing is found, with a count of visible questions. Each accordion
header is a real <button> wired with aria-expanded and aria-controls, so screen readers and
keyboard users get a first-class experience.
A contact us card rounds things out with phone, email and clinic hours for owners who still need a human. All interactions are vanilla JS — no libraries.
Illustrative UI only — not for real veterinary use.