Tabcordion

A responsive accordion, built into your site with no plugin and no library. One set of panels that is tabs when the element is wide and an accordion when it is narrow, decided by a CSS container query on its own width rather than the window. The ARIA follows the layout (tablist / tab / tabpanel, or buttons with aria-expanded), the open panel carries across the switch, and the accordion can hold several open. Without JavaScript every panel is open under its heading.

Product details

Drag the corner of the box to make it narrower: below 40rem the tabs become an accordion, and the open panel stays open.

Description

A 12 oz stoneware mug, thrown by hand and glazed in a speckled oat color. Each one is a little different.

Size

9.5 cm tall and 8.5 cm across the rim, with a handle that fits three fingers. It weighs about 380 g.

Care

Dishwasher and microwave safe. Avoid sudden changes of temperature, such as boiling water into a cold mug straight from the fridge.

Delivery

Packed in recycled card and sent within two working days. Back to the description.

A link can open a panel: delivery times.

In a sidebar

The same element in a 17rem column stays an accordion on a wide screen, because its own width decides, not the window’s. This one keeps a single panel open.

You'll need to give us

The name of each section and what goes in itNeeded to start

Send these with your request and we can start straight away. Everything else is ours to do.

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.

Also called

responsive tabstabs to accordionaccordion tabstabs on mobileproduct details tabsEasy Responsive Tabs

What it replaces

A tabs widget and a toggle widget with the same content, one hidden on desktop and one on mobile (the usual Elementor and Divi workaround)
Easy Responsive Tabs and other tabs-to-accordion jQuery plugins

Good for

A few sections that sit in columns of different widths: product details beside a gallery, a service’s scope in a card grid, visiting information in a sidebar. On a phone several sections can stay open at once, so people can compare two without reopening.

Not for

A tab set that should stay tabs until the phone, or that needs a vertical strip, icons, manual activation or a #hash that follows the selection: use tabs, which decides by the window. A list of questions, FAQ schema, or answers that find-in-page should reach while closed: use accordion, which is native <details>. And anything everyone must read: behind a tab or a tap, most people never see it.

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.

Tabs: tablist named by `label`, tab and tabpanel with aria-selected, aria-controls and aria-labelledby, a roving tabindex so the strip is one Tab stop; ← → wrap, Home and End jump to the ends, and a tab is selected when it gets focus. A panel with nothing focusable inside is itself focusable.
Accordion: each heading holds a real button with aria-expanded and aria-controls; Enter and Space toggle, ↑ ↓ Home End move between headings. The tab strip is hidden and the panels lose their tabpanel role, so a screen reader never meets tab semantics it cannot use.
One breakpoint, in the stylesheet: the script reads the layout the container query chose and sets the ARIA to match whenever the element changes width. The selected tab’s panel is open in the accordion, and the panel opened last is the selected tab when it widens again.
Without JavaScript there is no tab strip and every panel is open under its label as a heading; #id links jump to the panel.
prefers-reduced-motion: no panel fade and no chevron turn.

Where it's live

superherotech.ai: /elements/tabcordion/ (demo)

How to ask for it

“The tabcordion 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, Accordion / FAQ, 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, 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

Scrollbox
Fit a long row of projects, products or categories into one line, and let the edges show there is more to scroll.
Mega menu
Put every page a visitor might want one click from the header, grouped the way your customers think about them.
Accordion / FAQ
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.
Tabs
Put several related answers in one place, a tab each, that folds into a simple list on a phone.