Website elementsNavigation & layout
Accordion / FAQ
A faq page design, built into your site with no plugin and no library. Questions (or any titles) that open to show their answer, on native <details>/<summary>: keyboard, screen readers and find-in-page work with no script. One open at a time or several, numbered, chevron or plus, deep-linkable by #id. With jsonLd on, the same items become the page’s FAQPage structured data, so the FAQ and the accordion are one element.
Frequently asked questions
Do you take custom cake orders?
Yes. Order at least five days ahead for a celebration cake, and two weeks ahead for a wedding. Tell us the size, the flavor and any lettering, and we confirm the price before we bake.
Can I order ahead and pick up?
Call or message us by 4 PM and your order is boxed and waiting from 8 AM the next morning. Pay when you collect.
Do you have gluten-free or vegan options?
Every day we bake a gluten-free loaf and at least two vegan pastries. They share an oven and a kitchen with wheat flour, so they are not suitable for coeliac disease.
Is there parking?
There is free two-hour parking on the street out front and a public lot behind the library, a two-minute walk away.
Do you cater meetings and events?
Yes, from a box of pastries for a morning meeting to breakfast for eighty. Give us three days’ notice; we deliver within five miles.
Can I bring my dog?
Dogs are welcome on the patio, and there is always a water bowl by the door. Inside, only assistance dogs, because of the kitchen.
Every answer is in the page even while it is closed, so find in page (Ctrl+F or ⌘F) finds words inside it and opens it. A link opens the answer it points to: can I bring my dog?
What we do
Celebration cakes
Layer cakes for birthdays, anniversaries and office goodbyes, decorated to order.
Wedding cakes
A tasting, a design meeting and delivery and set-up on the day.
Breakfast catering
Pastries, bread, fruit and coffee for groups of ten to eighty.
Baking classes
Saturday-morning classes for eight people: bread, pastry or decorating.
You'll need to give us
- The questions, or titles, and the answer to eachNeeded to startIf they are your frequently asked questions, we also mark them up so search engines can read them.
Send these with your request and we can start straight away. Everything else is ours to do.
FAQ page design that gets people their answer fast: each question opens with a tap, every answer is findable with Ctrl+F, and search engines and AI assistants can read them as questions and answers.
Also called
PowerPack FAQ ModulePowerPack Advanced AccordionsUABB Advanced AccordionElementor AccordionFAQ accordionFAQ schematogglecollapsible
What it replaces
- PowerPack “FAQ” module (Beaver Builder)
- PowerPack “Advanced Accordions” module
- UABB “Advanced Accordion”
- Elementor Accordion and Toggle widgets
- hand-written FAQ lists
- FAQ schema plugins (Yoast and Rank Math FAQ blocks, Structured Content)
Good for
An FAQ page or section; services, policies or specifications that visitors scan for the one they need; any page where most readers want one answer out of many.
Not for
Content everyone must read (behind a tap, most people never see it), a single paragraph, or navigation. Nor is it a promise of search features: since August 2023 Google shows FAQ rich results only for well-known, authoritative government and health sites. The schema is still correct markup that tells machines these are questions and answers; it does not buy extra space in results.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- Native <details>/<summary>: Tab reaches each question, Enter or Space opens and closes it, and screen readers announce expanded or collapsed. The browser does this, not a script, so it cannot break.
- Every answer is in the page even when closed: find-in-page (Ctrl/⌘+F) matches it, and current Chrome, Edge and Firefox open the item. This is why the element is <details> and not a JavaScript accordion. It works with JavaScript off.
- Each question is a heading at `headingLevel` inside its summary, so the page outline lists the questions. The icon is decorative (aria-hidden).
- `exclusive` uses the name attribute, so the browser closes the others. A link to #item-id opens that item and scrolls to it (the one script in the element).
- Opening animates its height where ::details-content and interpolate-size exist (Chromium) and is instant elsewhere; under prefers-reduced-motion nothing animates, the icon included.
Where it's live
- JWalk Tours: /faqs/ and the tour pages: its own FaqList.astro (<details>, FAQPage JSON-LD from the same array); moves to this element on its next FAQ request
- stbeautybar.com: /about-us/ FAQ: its own Faqs.astro (exclusive, first open, rotating icon, FAQPage JSON-LD); moves to this element on its next FAQ request
How to ask for it
“The accordion on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Navigation & layout
See them all working- Tabs
Put several related answers in one place, a tab each, that folds into a simple list on a phone.
- Off-canvas panel
Keep the cart, the filters or the account menu one tap away, sliding in from the edge instead of crowding the page.
- Tabcordion
The same details as tabs where there is room and as an accordion where there is not, even in a sidebar, and the section someone was reading stays open when it changes.
- Scrollbox
Fit a long row of projects, products or categories into one line, and let the edges show there is more to scroll.
Want the accordion / faq on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.