1
Start by collecting goals, user needs, content requirements, project scope, page structure, and the main problems the interface should solve.
- Project goals
- Audience needs
- Content structure
JavaScript accordions are one of the most useful interactive UI components for modern websites, FAQ sections, product pages, dashboards, documentation pages, pricing pages, support centers, mobile layouts, and content-heavy landing pages. They help you hide long content behind clickable headers, reduce page clutter, and let users open only the information they need.
In this guide, you will find 30 JavaScript accordion examples for real website projects, including FAQ accordions, product details accordions, mobile filter accordions, documentation toggles, pricing FAQ sections, dashboard settings panels, nested accordions, animated content expanders, one-open-at-a-time accordions, multi-open accordions, accessible accordion patterns, and responsive UI components you can customize for your own work.
This post focuses on JavaScript accordion behavior, click handling, open and close logic, active states, smooth content expansion, keyboard-friendly interaction, responsive accordion design, and reusable vanilla JavaScript patterns. For related UI components, you can also explore our JavaScript search filter examples, JavaScript dropdown menu examples, JavaScript slider examples, and JavaScript modal examples.
On this page
Table of Contents
- What Is a JavaScript Accordion?
- Why JavaScript Accordions Matter
- JavaScript Accordion vs CSS Accordion
- What Should a Good JavaScript Accordion Include?
- 30 JavaScript Accordion Examples
- JavaScript Accordion Best Practices
- Responsive Accordion Design Tips
- Common JavaScript Accordion Mistakes
- JavaScript Accordion FAQ
- Conclusion
- Related JavaScript and CSS Guides
What Is a JavaScript Accordion?
A JavaScript accordion is an interactive content component where users click a header, question, label, or button to reveal hidden content below it. When the same header is clicked again, the content can close. Accordions are commonly used for FAQ sections, product information, support answers, mobile filters, pricing questions, documentation topics, settings panels, and compact landing page sections.
The main purpose of an accordion is to organize information without making the page feel too long. Instead of showing every answer, paragraph, specification, or setting at once, an accordion keeps the layout clean and lets visitors expand only the content they want to read.
A JavaScript accordion can be very simple or highly advanced. A basic version may toggle one answer open and closed. A more advanced version may include smooth height animation, one-open-at-a-time behavior, nested panels, icons that rotate, keyboard support, dynamic content, search filtering, active states, URL hash support, or accessible ARIA attributes.
Why JavaScript Accordions Matter
JavaScript accordions matter because many modern pages need to show a lot of information without overwhelming the visitor. A long FAQ section, product specification table, pricing explanation, help center, mobile filter panel, or onboarding checklist can quickly become hard to scan if everything is open at once.
- They reduce visual clutter by hiding secondary content until the user needs it.
- They improve FAQ sections by making questions easier to scan and answers easier to open.
- They help ecommerce pages by organizing product details, shipping info, sizing, materials, warranty text, and reviews.
- They support mobile layouts by turning long sections, filters, menus, and settings into compact expandable panels.
- They improve documentation UX by grouping related topics, steps, examples, and explanations into readable blocks.
Accordions are especially useful when users do not need every piece of content at the same time. Someone reading a pricing page may only care about billing questions. Someone viewing a product page may only want size details. Someone using a dashboard may only need one settings group. A well-built JavaScript accordion makes that interaction faster and cleaner.
JavaScript Accordion vs CSS Accordion
A CSS accordion can work well for simple show-and-hide content, especially when using checkbox, radio, details, summary, or hover-based patterns. However, JavaScript gives you more control over behavior, state, animation, accessibility, and logic.
With JavaScript, you can decide whether multiple panels can stay open, whether opening one panel should close the others, whether the first item should be open by default, how icons should animate, how keyboard interaction should work, and how the accordion should respond to dynamic content changes.
- Use a CSS accordion when the component is very simple and does not need advanced logic.
- Use a JavaScript accordion when you need custom open and close behavior, animation control, ARIA updates, or dynamic state.
- Use one-open-at-a-time logic for FAQ sections, pricing questions, and compact information groups.
- Use multi-open logic when users may need to compare several answers, settings, or product details.
- Use nested accordions carefully when documentation, menus, filters, or help centers need multiple content levels.
This guide focuses on JavaScript accordion examples, so every demo will include visible JavaScript, HTML, and CSS code. The examples are designed to be copy-paste friendly, easy to customize, and different in layout, style, structure, and interaction pattern.
What Should a Good JavaScript Accordion Include?
A good JavaScript accordion should feel obvious, fast, and stable. Users should understand which parts are clickable, which panel is open, and what happened after they clicked. The content should open smoothly, the active state should be visible, and the layout should remain usable on desktop, tablet, and mobile.
Clear clickable headers
Accordion buttons should look interactive, with strong labels, icons, arrows, or plus signs that show users they can expand the content.
Visible active state
The open accordion item should look different from closed items, so users know which section they are currently reading.
Smooth open and close behavior
JavaScript can control height, classes, icons, and state so the accordion feels polished instead of abrupt or broken.
Responsive mobile layout
Accordions should be easy to tap on small screens, with readable text, enough spacing, and no cramped controls.
Before building an accordion, decide how the component should behave. Should one item open at a time, or should users be able to open multiple items? Should the first panel be open by default? Should the accordion use a plus icon, chevron, number, badge, or progress indicator? Should it work as a FAQ block, product information section, mobile menu, dashboard panel, or documentation layout?
- Use button elements for accordion triggers so the clickable areas are more accessible and predictable.
- Add active classes to open items so CSS can style the selected state clearly.
- Update icons when panels open and close, such as plus to minus or chevron rotation.
- Use smooth animation carefully so content expands nicely without layout jumps.
- Keep panel content readable with enough spacing, line height, and contrast.
- Support keyboard users with real buttons, focus states, and logical tab order.
- Avoid hiding important content if users must see it immediately to complete a task.
- Test long answers because real FAQ, product, and documentation content is often longer than demo text.
- Make touch targets large enough for mobile users who tap accordion headers with a thumb.
- Keep JavaScript scoped so multiple accordions can work on the same page without conflicts.
You can combine JavaScript accordions with many other interface patterns. FAQ accordions work well with modern CSS forms on support pages, product accordions can be placed inside modern CSS cards, mobile filter accordions can pair with JavaScript search filters, and documentation accordions can be combined with layouts from our modern CSS layouts guide.
30 JavaScript Accordion Examples
Now let’s look at 30 JavaScript accordion examples for real website projects. Each example uses a different layout, visual style, open and close behavior, content structure, animation style, icon pattern, FAQ format, product details section, dashboard panel, mobile filter layout, nested structure, or responsive accordion approach, so you can build professional expandable UI components with visible JavaScript, HTML, and CSS code.
1. Modern FAQ Accordion
A modern FAQ accordion is one of the most common JavaScript accordion patterns for websites, SaaS pages, service pages, ecommerce stores, and landing pages. It keeps questions visible while hiding longer answers until the user clicks.
This example uses a clean FAQ card layout with smooth open and close behavior, plus and minus icons, active item styling, and one-open-at-a-time JavaScript logic.
- One-open-at-a-time accordion behavior
- Smooth FAQ answer expansion
- Plus and minus icon update
- Active state styling
- Responsive FAQ layout
Example 01
Modern FAQ Accordion
Click a question to open the answer. Opening one FAQ item automatically closes the others.
A JavaScript accordion is an interactive UI component that shows or hides content when a user clicks a heading, question, or button.
Accordions work well for FAQ sections, product details, pricing questions, documentation pages, mobile filters, and dashboard settings panels.
Yes. JavaScript can be written for one-open-at-a-time accordions or multi-open accordions depending on the user experience you want.
Yes. The layout, spacing, font sizes, and clickable buttons are designed to stay readable and easy to tap on smaller screens.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-one]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-one-item"));
function closeItem(item) {
const trigger = item.querySelector(".vb-accordion-one-trigger");
const panel = item.querySelector(".vb-accordion-one-panel");
const icon = trigger.querySelector("strong");
item.classList.remove("is-open");
trigger.setAttribute("aria-expanded", "false");
icon.textContent = "+";
panel.style.maxHeight = "0px";
}
function openItem(item) {
const trigger = item.querySelector(".vb-accordion-one-trigger");
const panel = item.querySelector(".vb-accordion-one-panel");
const icon = trigger.querySelector("strong");
item.classList.add("is-open");
trigger.setAttribute("aria-expanded", "true");
icon.textContent = "−";
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const trigger = item.querySelector(".vb-accordion-one-trigger");
trigger.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const firstOpen = accordion.querySelector(".vb-accordion-one-item.is-open");
if (firstOpen) {
openItem(firstOpen);
}
})();
HTML
<div class="vb-accordion-one-demo">
<div class="vb-accordion-one-shell" data-vb-accordion-one>
<div class="vb-accordion-one-intro">
<span>Example 01</span>
<h3>Modern FAQ Accordion</h3>
<p>Click a question to open the answer. Opening one FAQ item automatically closes the others.</p>
</div>
<div class="vb-accordion-one-list">
<div class="vb-accordion-one-item is-open">
<button class="vb-accordion-one-trigger" type="button" aria-expanded="true">
<span>What is a JavaScript accordion?</span>
<strong>−</strong>
</button>
<div class="vb-accordion-one-panel">
<div class="vb-accordion-one-content">
<p>A JavaScript accordion is an interactive UI component that shows or hides content when a user clicks a heading, question, or button.</p>
</div>
</div>
</div>
<div class="vb-accordion-one-item">
<button class="vb-accordion-one-trigger" type="button" aria-expanded="false">
<span>Where should I use accordions?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-one-panel">
<div class="vb-accordion-one-content">
<p>Accordions work well for FAQ sections, product details, pricing questions, documentation pages, mobile filters, and dashboard settings panels.</p>
</div>
</div>
</div>
<div class="vb-accordion-one-item">
<button class="vb-accordion-one-trigger" type="button" aria-expanded="false">
<span>Can multiple accordion items stay open?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-one-panel">
<div class="vb-accordion-one-content">
<p>Yes. JavaScript can be written for one-open-at-a-time accordions or multi-open accordions depending on the user experience you want.</p>
</div>
</div>
</div>
<div class="vb-accordion-one-item">
<button class="vb-accordion-one-trigger" type="button" aria-expanded="false">
<span>Is this accordion responsive?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-one-panel">
<div class="vb-accordion-one-content">
<p>Yes. The layout, spacing, font sizes, and clickable buttons are designed to stay readable and easy to tap on smaller screens.</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-one-demo,
.vb-accordion-one-demo * {
box-sizing: border-box;
}
.vb-accordion-one-demo {
margin: 28px 0;
padding: 34px;
border-radius: 34px;
background:
radial-gradient(circle at 12% 18%, rgba(139, 92, 246, 0.24), transparent 34%),
radial-gradient(circle at 88% 16%, rgba(6, 182, 212, 0.20), transparent 36%),
linear-gradient(135deg, #f5f3ff 0%, #ecfeff 52%, #ffffff 100%) !important;
border: 1px solid rgba(196, 181, 253, 0.50);
box-shadow: 0 24px 70px rgba(76, 29, 149, 0.12);
}
.vb-accordion-one-shell {
max-width: 980px;
margin: 0 auto;
padding: 34px;
border-radius: 30px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}
.vb-accordion-one-intro {
max-width: 720px;
margin-bottom: 26px;
}
.vb-accordion-one-intro > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #ede9fe;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-one-intro h3 {
margin: 0 0 14px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(36px, 5vw, 64px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-accordion-one-intro p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-one-list {
display: grid;
gap: 14px;
}
.vb-accordion-one-item {
overflow: hidden;
border-radius: 22px;
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.26);
transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.vb-accordion-one-item.is-open {
background:
radial-gradient(circle at 12% 12%, rgba(139, 92, 246, 0.10), transparent 34%),
linear-gradient(135deg, #ffffff, #f8fafc) !important;
border-color: rgba(139, 92, 246, 0.42);
box-shadow: 0 18px 46px rgba(76, 29, 149, 0.10);
}
.vb-accordion-one-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 72px;
padding: 20px 22px;
border: 0;
background: transparent;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
text-align: left;
cursor: pointer;
}
.vb-accordion-one-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
line-height: 1.3;
font-weight: 900;
letter-spacing: -0.025em;
}
.vb-accordion-one-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 999px;
background: #ede9fe;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
font-size: 24px;
line-height: 1;
font-weight: 900;
}
.vb-accordion-one-item.is-open .vb-accordion-one-trigger strong {
background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-one-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-one-content {
padding: 0 22px 22px;
}
.vb-accordion-one-content p {
margin: 0 !important;
padding-top: 2px;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 640px) {
.vb-accordion-one-demo {
padding: 18px;
border-radius: 24px;
}
.vb-accordion-one-shell {
padding: 22px;
border-radius: 22px;
}
.vb-accordion-one-intro h3 {
font-size: 38px !important;
}
.vb-accordion-one-trigger {
min-height: 64px;
padding: 18px;
}
.vb-accordion-one-trigger span {
font-size: 16px;
}
.vb-accordion-one-content {
padding: 0 18px 18px;
}
}
This modern FAQ accordion is a strong base pattern for support sections, pricing pages, homepage FAQ blocks, service pages, and landing pages where visitors need quick answers without scrolling through long visible text.
2. Product Details Accordion
A product details accordion helps ecommerce pages organize important information such as specifications, shipping, materials, care instructions, warranty details, and return policy content. It keeps product pages cleaner while still making detailed information available.
This example uses a split ecommerce layout with a product preview card on the left and a vertical accordion on the right. The JavaScript allows multiple sections to stay open, which is useful when shoppers want to compare details before buying.
- Multi-open accordion behavior
- Product page information layout
- Animated chevron rotation
- Specification and shipping panels
- Professional ecommerce-style design
Example 02
Product Details Accordion
Use expandable panels to organize product specifications, delivery details, materials, and warranty text.
€149
In stock
- Material: powder-coated aluminum frame
- Finish: matte graphite surface
- Size: 120 × 60 × 74 cm
- Best for: modern home office setups
Standard delivery usually takes 3–6 business days. Large items may arrive in separate packages depending on warehouse availability.
Clean the surface with a soft cloth and mild soap. Avoid abrasive cleaners, harsh chemicals, and rough scrubbing tools.
The product includes a 2-year limited warranty. Returns are accepted within 30 days if the item is unused and returned in original packaging.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-two]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-two-item"));
function setPanelHeight(item) {
const panel = item.querySelector(".vb-accordion-two-panel");
if (item.classList.contains("is-open")) {
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
panel.style.maxHeight = "0px";
}
}
items.forEach(function (item) {
const trigger = item.querySelector(".vb-accordion-two-trigger");
trigger.addEventListener("click", function () {
const isOpen = item.classList.toggle("is-open");
trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
setPanelHeight(item);
});
setPanelHeight(item);
});
window.addEventListener("resize", function () {
items.forEach(setPanelHeight);
});
})();
HTML
<div class="vb-accordion-two-demo">
<div class="vb-accordion-two-product" data-vb-accordion-two>
<div class="vb-accordion-two-preview">
<span>Example 02</span>
<div class="vb-accordion-two-product-art">
<div class="vb-accordion-two-card-shape"></div>
</div>
<h3>Product Details Accordion</h3>
<p>Use expandable panels to organize product specifications, delivery details, materials, and warranty text.</p>
<div class="vb-accordion-two-price">
<strong>€149</strong>
<small>In stock</small>
</div>
</div>
<div class="vb-accordion-two-info">
<div class="vb-accordion-two-item is-open">
<button class="vb-accordion-two-trigger" type="button" aria-expanded="true">
<span>Product specifications</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-two-panel">
<div class="vb-accordion-two-content">
<ul>
<li>Material: powder-coated aluminum frame</li>
<li>Finish: matte graphite surface</li>
<li>Size: 120 × 60 × 74 cm</li>
<li>Best for: modern home office setups</li>
</ul>
</div>
</div>
</div>
<div class="vb-accordion-two-item">
<button class="vb-accordion-two-trigger" type="button" aria-expanded="false">
<span>Shipping and delivery</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-two-panel">
<div class="vb-accordion-two-content">
<p>Standard delivery usually takes 3–6 business days. Large items may arrive in separate packages depending on warehouse availability.</p>
</div>
</div>
</div>
<div class="vb-accordion-two-item">
<button class="vb-accordion-two-trigger" type="button" aria-expanded="false">
<span>Care instructions</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-two-panel">
<div class="vb-accordion-two-content">
<p>Clean the surface with a soft cloth and mild soap. Avoid abrasive cleaners, harsh chemicals, and rough scrubbing tools.</p>
</div>
</div>
</div>
<div class="vb-accordion-two-item">
<button class="vb-accordion-two-trigger" type="button" aria-expanded="false">
<span>Warranty and returns</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-two-panel">
<div class="vb-accordion-two-content">
<p>The product includes a 2-year limited warranty. Returns are accepted within 30 days if the item is unused and returned in original packaging.</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-two-demo,
.vb-accordion-two-demo * {
box-sizing: border-box;
}
.vb-accordion-two-demo {
margin: 28px 0;
padding: 34px;
border-radius: 34px;
background:
radial-gradient(circle at 14% 16%, rgba(251, 146, 60, 0.24), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(244, 63, 94, 0.20), transparent 34%),
linear-gradient(135deg, #fff7ed 0%, #fff1f2 52%, #ffffff 100%) !important;
border: 1px solid rgba(253, 186, 116, 0.48);
box-shadow: 0 24px 70px rgba(124, 45, 18, 0.12);
}
.vb-accordion-two-product {
display: grid;
grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
padding: 18px;
border-radius: 30px;
background: #111827;
box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}
.vb-accordion-two-preview {
padding: 26px;
border-radius: 24px;
background:
radial-gradient(circle at 18% 16%, rgba(251, 146, 60, 0.28), transparent 34%),
linear-gradient(135deg, #7c2d12, #be123c) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-two-preview > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.13);
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-two-product-art {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
margin-bottom: 22px;
border-radius: 24px;
background:
radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.28), transparent 32%),
linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
border: 1px solid rgba(255,255,255,0.15);
overflow: hidden;
}
.vb-accordion-two-card-shape {
width: 190px;
height: 150px;
border-radius: 32px;
background:
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,237,213,0.76)) !important;
box-shadow:
0 28px 60px rgba(0,0,0,0.28),
inset 0 1px 0 rgba(255,255,255,0.76);
transform: rotate(-7deg);
position: relative;
}
.vb-accordion-two-card-shape::before {
content: "";
position: absolute;
left: 28px;
right: 28px;
top: 34px;
height: 12px;
border-radius: 999px;
background: rgba(190, 18, 60, 0.32);
box-shadow: 0 32px 0 rgba(190, 18, 60, 0.22), 0 64px 0 rgba(190, 18, 60, 0.16);
}
.vb-accordion-two-preview h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 4vw, 58px) !important;
line-height: 0.98 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-accordion-two-preview p {
margin: 0 0 22px !important;
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-two-price {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
border-radius: 20px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.14);
}
.vb-accordion-two-price strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 34px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-two-price small {
display: inline-flex;
padding: 8px 11px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.18);
color: #bbf7d0 !important;
-webkit-text-fill-color: #bbf7d0 !important;
font-size: 12px;
font-weight: 950;
}
.vb-accordion-two-info {
display: grid;
align-content: start;
gap: 14px;
padding: 10px;
}
.vb-accordion-two-item {
overflow: hidden;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 18px 50px rgba(2, 6, 23, 0.18);
}
.vb-accordion-two-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 72px;
padding: 20px 22px;
border: 0;
background: #ffffff;
text-align: left;
cursor: pointer;
}
.vb-accordion-two-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
line-height: 1.25;
font-weight: 950;
letter-spacing: -0.03em;
}
.vb-accordion-two-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 14px;
background: #fff7ed;
color: #be123c !important;
-webkit-text-fill-color: #be123c !important;
font-size: 24px;
font-weight: 950;
transform: rotate(0deg);
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-two-item.is-open .vb-accordion-two-trigger strong {
transform: rotate(180deg);
background: linear-gradient(135deg, #fb923c, #be123c) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-two-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-two-content {
padding: 0 22px 22px;
}
.vb-accordion-two-content p,
.vb-accordion-two-content li {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-two-content p {
margin: 0 !important;
}
.vb-accordion-two-content ul {
display: grid;
gap: 8px;
margin: 0 !important;
padding-left: 20px !important;
}
@media (max-width: 900px) {
.vb-accordion-two-product {
grid-template-columns: 1fr;
}
.vb-accordion-two-product-art {
min-height: 220px;
}
}
@media (max-width: 640px) {
.vb-accordion-two-demo {
padding: 18px;
border-radius: 24px;
}
.vb-accordion-two-product {
padding: 12px;
border-radius: 24px;
}
.vb-accordion-two-preview {
padding: 22px;
border-radius: 20px;
}
.vb-accordion-two-preview h3 {
font-size: 38px !important;
}
.vb-accordion-two-trigger {
min-height: 64px;
padding: 18px;
}
.vb-accordion-two-trigger span {
font-size: 16px;
}
.vb-accordion-two-content {
padding: 0 18px 18px;
}
}
This product details accordion is useful for ecommerce product pages, catalog landing pages, service packages, digital products, course pages, and any page where users need structured details without a long block of visible text.
3. Dark Glassmorphism Accordion
A dark glassmorphism accordion is a strong choice for SaaS landing pages, AI tools, crypto dashboards, premium product pages, and futuristic website sections. It uses translucent panels, blurred backgrounds, glowing borders, and smooth JavaScript toggle behavior.
This example uses a dark gradient background, glass-style accordion rows, numbered labels, glowing active states, and one-open-at-a-time behavior. The design is intentionally different from the previous examples, with softer pill-shaped panels and neon visual details.
- Dark glassmorphism accordion UI
- One-open-at-a-time JavaScript behavior
- Numbered accordion rows
- Glowing active border effect
- Responsive premium-style layout
Example 03
Dark Glassmorphism Accordion
Use a glowing glass accordion layout for futuristic FAQ, SaaS, AI tool, or dashboard sections.
Yes. This layout works well for product FAQs, feature explanations, onboarding questions, pricing details, and premium landing page sections.
Glassmorphism uses translucent backgrounds, subtle borders, blurred layers, and soft glowing effects to create depth without heavy visual blocks.
The JavaScript calculates the panel height dynamically, so longer answers, feature lists, short paragraphs, or documentation notes can open smoothly.
Yes. You can adjust the background gradients, glowing borders, text colors, and orb effects to match your brand or website theme.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-three]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-three-item"));
function closeItem(item) {
const trigger = item.querySelector(".vb-accordion-three-trigger");
const panel = item.querySelector(".vb-accordion-three-panel");
item.classList.remove("is-open");
trigger.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const trigger = item.querySelector(".vb-accordion-three-trigger");
const panel = item.querySelector(".vb-accordion-three-panel");
item.classList.add("is-open");
trigger.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const trigger = item.querySelector(".vb-accordion-three-trigger");
trigger.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const openDefault = accordion.querySelector(".vb-accordion-three-item.is-open");
if (openDefault) {
openItem(openDefault);
}
window.addEventListener("resize", function () {
const openItemElement = accordion.querySelector(".vb-accordion-three-item.is-open");
if (openItemElement) {
openItem(openItemElement);
}
});
})();
HTML
<div class="vb-accordion-three-demo">
<div class="vb-accordion-three-orb vb-accordion-three-orb-a"></div>
<div class="vb-accordion-three-orb vb-accordion-three-orb-b"></div>
<div class="vb-accordion-three-shell" data-vb-accordion-three>
<div class="vb-accordion-three-top">
<span>Example 03</span>
<h3>Dark Glassmorphism Accordion</h3>
<p>Use a glowing glass accordion layout for futuristic FAQ, SaaS, AI tool, or dashboard sections.</p>
</div>
<div class="vb-accordion-three-stack">
<section class="vb-accordion-three-item is-open">
<button class="vb-accordion-three-trigger" type="button" aria-expanded="true">
<span class="vb-accordion-three-number">01</span>
<span class="vb-accordion-three-title">Can I use this accordion on a SaaS landing page?</span>
<span class="vb-accordion-three-icon"></span>
</button>
<div class="vb-accordion-three-panel">
<div class="vb-accordion-three-content">
<p>Yes. This layout works well for product FAQs, feature explanations, onboarding questions, pricing details, and premium landing page sections.</p>
</div>
</div>
</section>
<section class="vb-accordion-three-item">
<button class="vb-accordion-three-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-three-number">02</span>
<span class="vb-accordion-three-title">What makes glassmorphism different?</span>
<span class="vb-accordion-three-icon"></span>
</button>
<div class="vb-accordion-three-panel">
<div class="vb-accordion-three-content">
<p>Glassmorphism uses translucent backgrounds, subtle borders, blurred layers, and soft glowing effects to create depth without heavy visual blocks.</p>
</div>
</div>
</section>
<section class="vb-accordion-three-item">
<button class="vb-accordion-three-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-three-number">03</span>
<span class="vb-accordion-three-title">Does this design support long content?</span>
<span class="vb-accordion-three-icon"></span>
</button>
<div class="vb-accordion-three-panel">
<div class="vb-accordion-three-content">
<p>The JavaScript calculates the panel height dynamically, so longer answers, feature lists, short paragraphs, or documentation notes can open smoothly.</p>
</div>
</div>
</section>
<section class="vb-accordion-three-item">
<button class="vb-accordion-three-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-three-number">04</span>
<span class="vb-accordion-three-title">Can I change the colors?</span>
<span class="vb-accordion-three-icon"></span>
</button>
<div class="vb-accordion-three-panel">
<div class="vb-accordion-three-content">
<p>Yes. You can adjust the background gradients, glowing borders, text colors, and orb effects to match your brand or website theme.</p>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-three-demo,
.vb-accordion-three-demo * {
box-sizing: border-box;
}
.vb-accordion-three-demo {
position: relative;
isolation: isolate;
margin: 28px 0;
padding: 46px;
border-radius: 18px 58px 18px 58px;
background:
radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.18), transparent 34%),
radial-gradient(circle at 80% 14%, rgba(168, 85, 247, 0.20), transparent 34%),
linear-gradient(135deg, #020617 0%, #111827 48%, #312e81 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.22);
overflow: hidden;
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.38);
}
.vb-accordion-three-orb {
position: absolute;
z-index: -1;
border-radius: 999px;
filter: blur(4px);
opacity: 0.72;
}
.vb-accordion-three-orb-a {
width: 180px;
height: 180px;
left: -52px;
top: -48px;
background: rgba(34, 211, 238, 0.22);
}
.vb-accordion-three-orb-b {
width: 240px;
height: 240px;
right: -80px;
bottom: -90px;
background: rgba(168, 85, 247, 0.24);
}
.vb-accordion-three-shell {
max-width: 1040px;
margin: 0 auto;
}
.vb-accordion-three-top {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.7fr);
gap: 24px;
align-items: end;
margin-bottom: 28px;
}
.vb-accordion-three-top > span {
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
padding: 8px 13px;
border-radius: 0 999px 999px 999px;
background: rgba(34, 211, 238, 0.12);
border: 1px solid rgba(34, 211, 238, 0.28);
color: #a5f3fc !important;
-webkit-text-fill-color: #a5f3fc !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-accordion-three-top h3 {
margin: 0 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(36px, 5vw, 70px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-three-top p {
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-three-stack {
display: grid;
gap: 12px;
}
.vb-accordion-three-item {
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.075);
border: 1px solid rgba(255, 255, 255, 0.13);
backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
transition: border-color 0.24s ease, background 0.24s ease, border-radius 0.24s ease, box-shadow 0.24s ease;
}
.vb-accordion-three-item.is-open {
border-radius: 28px;
background: rgba(255, 255, 255, 0.105);
border-color: rgba(34, 211, 238, 0.44);
box-shadow:
0 24px 70px rgba(34, 211, 238, 0.10),
inset 0 1px 0 rgba(255,255,255,0.12);
}
.vb-accordion-three-trigger {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 72px;
padding: 12px 16px 12px 12px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-three-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.82);
border: 1px solid rgba(255,255,255,0.12);
color: #67e8f9 !important;
-webkit-text-fill-color: #67e8f9 !important;
font-size: 13px;
font-weight: 950;
}
.vb-accordion-three-title {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
font-size: 18px;
line-height: 1.25;
font-weight: 900;
letter-spacing: -0.03em;
}
.vb-accordion-three-icon {
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.12);
}
.vb-accordion-three-icon::before,
.vb-accordion-three-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
border-radius: 999px;
background: #ffffff;
transform: translate(-50%, -50%);
transition: transform 0.22s ease, opacity 0.22s ease;
}
.vb-accordion-three-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-three-item.is-open .vb-accordion-three-icon {
background: linear-gradient(135deg, #22d3ee, #8b5cf6) !important;
}
.vb-accordion-three-item.is-open .vb-accordion-three-icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.vb-accordion-three-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-three-content {
padding: 0 24px 24px 82px;
}
.vb-accordion-three-content p {
max-width: 720px;
margin: 0 !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 760px) {
.vb-accordion-three-demo {
padding: 22px;
border-radius: 18px 34px 18px 34px;
}
.vb-accordion-three-top {
grid-template-columns: 1fr;
}
.vb-accordion-three-top h3 {
font-size: 38px !important;
}
.vb-accordion-three-trigger {
grid-template-columns: 44px minmax(0, 1fr) 36px;
gap: 12px;
}
.vb-accordion-three-number {
width: 44px;
height: 44px;
}
.vb-accordion-three-title {
font-size: 15px;
}
.vb-accordion-three-icon {
width: 36px;
height: 36px;
}
.vb-accordion-three-content {
padding: 0 18px 20px 68px;
}
}
This dark glassmorphism accordion is useful for modern SaaS websites, AI product pages, crypto dashboards, premium service sections, and landing pages that need a more futuristic expandable content style.
4. Timeline Step Accordion
A timeline step accordion is useful when content needs to follow a process, roadmap, onboarding flow, project sequence, or service timeline. Each accordion item represents one stage, and users can open the step they want to read.
This example uses a vertical timeline layout with connected dots, offset cards, sharp diagonal labels, and multi-open JavaScript behavior. It looks different from a standard FAQ because the accordion items behave like expandable process steps.
- Timeline-style accordion structure
- Multi-open expandable steps
- Connected vertical progress line
- Diagonal step labels
- Useful for processes, onboarding, and roadmaps
Example 04
Timeline Step Accordion
Expand each process step to reveal details, deliverables, and useful context inside a vertical timeline layout.
2
Create a simple layout plan before writing final code. This helps define sections, spacing, content hierarchy, and user interaction points.
- Section order
- Accordion placement
- Mobile behavior
3
Add the JavaScript toggle logic, active states, ARIA updates, dynamic max-height calculation, and resize handling for smooth expansion.
- Click handling
- Open state
- Height animation
4
Test the accordion on desktop and mobile, check long content, verify keyboard focus, and make sure the visual states are clear.
- Responsive testing
- Content length
- Accessibility check
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-four]");
if (!accordion) return;
const steps = Array.from(accordion.querySelectorAll(".vb-accordion-four-step"));
function updateStep(step) {
const button = step.querySelector(".vb-accordion-four-trigger");
const panel = step.querySelector(".vb-accordion-four-panel");
const label = button.querySelector("em");
const isOpen = step.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
label.textContent = isOpen ? "Close" : "Open";
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
steps.forEach(function (step) {
const button = step.querySelector(".vb-accordion-four-trigger");
button.addEventListener("click", function () {
step.classList.toggle("is-open");
updateStep(step);
});
updateStep(step);
});
window.addEventListener("resize", function () {
steps.forEach(updateStep);
});
})();
HTML
<div class="vb-accordion-four-demo">
<div class="vb-accordion-four-shell" data-vb-accordion-four>
<div class="vb-accordion-four-header">
<div>
<span>Example 04</span>
<h3>Timeline Step Accordion</h3>
</div>
<p>Expand each process step to reveal details, deliverables, and useful context inside a vertical timeline layout.</p>
</div>
<div class="vb-accordion-four-timeline">
<article class="vb-accordion-four-step is-open">
<div class="vb-accordion-four-marker">
<strong>1</strong>
</div>
<div class="vb-accordion-four-card">
<button class="vb-accordion-four-trigger" type="button" aria-expanded="true">
<span>Discovery and planning</span>
<em>Open</em>
</button>
<div class="vb-accordion-four-panel">
<div class="vb-accordion-four-content">
<p>Start by collecting goals, user needs, content requirements, project scope, page structure, and the main problems the interface should solve.</p>
<ul>
<li>Project goals</li>
<li>Audience needs</li>
<li>Content structure</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-four-step">
<div class="vb-accordion-four-marker">
<strong>2</strong>
</div>
<div class="vb-accordion-four-card">
<button class="vb-accordion-four-trigger" type="button" aria-expanded="false">
<span>Interface wireframe</span>
<em>Open</em>
</button>
<div class="vb-accordion-four-panel">
<div class="vb-accordion-four-content">
<p>Create a simple layout plan before writing final code. This helps define sections, spacing, content hierarchy, and user interaction points.</p>
<ul>
<li>Section order</li>
<li>Accordion placement</li>
<li>Mobile behavior</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-four-step">
<div class="vb-accordion-four-marker">
<strong>3</strong>
</div>
<div class="vb-accordion-four-card">
<button class="vb-accordion-four-trigger" type="button" aria-expanded="false">
<span>JavaScript interaction</span>
<em>Open</em>
</button>
<div class="vb-accordion-four-panel">
<div class="vb-accordion-four-content">
<p>Add the JavaScript toggle logic, active states, ARIA updates, dynamic max-height calculation, and resize handling for smooth expansion.</p>
<ul>
<li>Click handling</li>
<li>Open state</li>
<li>Height animation</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-four-step">
<div class="vb-accordion-four-marker">
<strong>4</strong>
</div>
<div class="vb-accordion-four-card">
<button class="vb-accordion-four-trigger" type="button" aria-expanded="false">
<span>Testing and polish</span>
<em>Open</em>
</button>
<div class="vb-accordion-four-panel">
<div class="vb-accordion-four-content">
<p>Test the accordion on desktop and mobile, check long content, verify keyboard focus, and make sure the visual states are clear.</p>
<ul>
<li>Responsive testing</li>
<li>Content length</li>
<li>Accessibility check</li>
</ul>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-four-demo,
.vb-accordion-four-demo * {
box-sizing: border-box;
}
.vb-accordion-four-demo {
margin: 28px 0;
padding: 34px;
border-radius: 8px;
background:
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(0deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(135deg, #f8fafc 0%, #eff6ff 52%, #ffffff 100%) !important;
background-size: 28px 28px, 28px 28px, auto !important;
border: 1px solid rgba(30, 64, 175, 0.14);
box-shadow: 0 24px 70px rgba(30, 64, 175, 0.10);
}
.vb-accordion-four-shell {
max-width: 1060px;
margin: 0 auto;
padding: 34px;
border-radius: 10px 42px 10px 42px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.09);
}
.vb-accordion-four-header {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.72fr);
gap: 24px;
align-items: end;
margin-bottom: 34px;
}
.vb-accordion-four-header span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 0;
background: #1d4ed8;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
padding-right: 22px;
}
.vb-accordion-four-header h3 {
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(36px, 5vw, 66px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-four-header p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-four-timeline {
position: relative;
display: grid;
gap: 18px;
}
.vb-accordion-four-timeline::before {
content: "";
position: absolute;
left: 31px;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #2563eb, #06b6d4, #10b981);
}
.vb-accordion-four-step {
position: relative;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.vb-accordion-four-marker {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
}
.vb-accordion-four-marker strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 18px 18px 18px 4px;
background: #ffffff;
border: 3px solid #2563eb;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 20px;
font-weight: 950;
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}
.vb-accordion-four-step.is-open .vb-accordion-four-marker strong {
background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-four-card {
overflow: hidden;
border-radius: 4px 26px 26px 26px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.26);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.vb-accordion-four-step.is-open .vb-accordion-four-card {
border-color: rgba(37, 99, 235, 0.36);
box-shadow: 0 24px 62px rgba(37, 99, 235, 0.14);
}
.vb-accordion-four-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 74px;
padding: 20px 22px;
border: 0;
background:
linear-gradient(135deg, #ffffff, #f8fafc) !important;
cursor: pointer;
text-align: left;
}
.vb-accordion-four-trigger span {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 19px;
line-height: 1.25;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-four-trigger em {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 76px;
min-height: 34px;
padding: 8px 14px;
border-radius: 0;
background: #eff6ff;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-style: normal;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.vb-accordion-four-step.is-open .vb-accordion-four-trigger em {
background: #1d4ed8;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-four-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-four-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
gap: 22px;
padding: 0 22px 22px;
}
.vb-accordion-four-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-four-content ul {
display: grid;
gap: 8px;
margin: 0 !important;
padding: 16px 18px !important;
border-radius: 18px;
background: #f8fafc;
list-style-position: inside;
}
.vb-accordion-four-content li {
margin: 0 !important;
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
line-height: 1.45;
font-weight: 800;
}
@media (max-width: 760px) {
.vb-accordion-four-demo {
padding: 18px;
}
.vb-accordion-four-shell {
padding: 22px;
border-radius: 10px 30px 10px 30px;
}
.vb-accordion-four-header {
grid-template-columns: 1fr;
}
.vb-accordion-four-header h3 {
font-size: 38px !important;
}
.vb-accordion-four-step {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
}
.vb-accordion-four-marker strong {
width: 48px;
height: 48px;
border-width: 2px;
}
.vb-accordion-four-timeline::before {
left: 23px;
}
.vb-accordion-four-trigger {
min-height: 64px;
padding: 18px;
align-items: flex-start;
flex-direction: column;
}
.vb-accordion-four-content {
grid-template-columns: 1fr;
padding: 0 18px 18px;
}
}
This timeline step accordion is ideal for process sections, onboarding pages, agency workflows, service roadmaps, project planning pages, and educational step-by-step layouts where each stage needs expandable detail.
5. Minimal Border Accordion
A minimal border accordion works well for clean editorial websites, documentation pages, product FAQs, portfolio pages, and modern service pages where the design should feel lightweight instead of visually heavy.
This example uses thin borders, small uppercase labels, spacious typography, line-based dividers, and a simple arrow button. The JavaScript uses one-open-at-a-time behavior and keeps the visual style calm and professional.
- Minimal line-based accordion design
- One-open-at-a-time behavior
- Small editorial labels
- Clean arrow rotation
- Useful for documentation and content pages
Example 05
Minimal Border Accordion
A quiet accordion layout with thin lines, simple spacing, and clear expandable content.
The JavaScript listens for a click on each accordion button, closes the other items, opens the selected item, and updates the content height smoothly.
A minimal accordion keeps the page light and readable. It is a good fit when content clarity is more important than decorative effects.
This style works for documentation notes, support questions, course lessons, service explanations, legal text summaries, and clean FAQ pages.
Yes. The desktop grid becomes a single-column button layout on smaller screens, keeping the labels and titles readable.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-five]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-five-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-five-trigger");
const panel = item.querySelector(".vb-accordion-five-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-five-trigger");
const panel = item.querySelector(".vb-accordion-five-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-five-trigger");
button.addEventListener("click", function () {
const wasOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!wasOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-five-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-five-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-five-demo">
<div class="vb-accordion-five-shell" data-vb-accordion-five>
<div class="vb-accordion-five-intro">
<span>Example 05</span>
<h3>Minimal Border Accordion</h3>
<p>A quiet accordion layout with thin lines, simple spacing, and clear expandable content.</p>
</div>
<div class="vb-accordion-five-list">
<div class="vb-accordion-five-item is-open">
<button class="vb-accordion-five-trigger" type="button" aria-expanded="true">
<span class="vb-accordion-five-label">Guide</span>
<span class="vb-accordion-five-title">How does the accordion open?</span>
<strong>→</strong>
</button>
<div class="vb-accordion-five-panel">
<div class="vb-accordion-five-content">
<p>The JavaScript listens for a click on each accordion button, closes the other items, opens the selected item, and updates the content height smoothly.</p>
</div>
</div>
</div>
<div class="vb-accordion-five-item">
<button class="vb-accordion-five-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-five-label">Layout</span>
<span class="vb-accordion-five-title">Why use a minimal accordion?</span>
<strong>→</strong>
</button>
<div class="vb-accordion-five-panel">
<div class="vb-accordion-five-content">
<p>A minimal accordion keeps the page light and readable. It is a good fit when content clarity is more important than decorative effects.</p>
</div>
</div>
</div>
<div class="vb-accordion-five-item">
<button class="vb-accordion-five-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-five-label">Content</span>
<span class="vb-accordion-five-title">What type of content fits here?</span>
<strong>→</strong>
</button>
<div class="vb-accordion-five-panel">
<div class="vb-accordion-five-content">
<p>This style works for documentation notes, support questions, course lessons, service explanations, legal text summaries, and clean FAQ pages.</p>
</div>
</div>
</div>
<div class="vb-accordion-five-item">
<button class="vb-accordion-five-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-five-label">Mobile</span>
<span class="vb-accordion-five-title">Does the layout work on phones?</span>
<strong>→</strong>
</button>
<div class="vb-accordion-five-panel">
<div class="vb-accordion-five-content">
<p>Yes. The desktop grid becomes a single-column button layout on smaller screens, keeping the labels and titles readable.</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-five-demo,
.vb-accordion-five-demo * {
box-sizing: border-box;
}
.vb-accordion-five-demo {
margin: 28px 0;
padding: 42px;
background:
linear-gradient(135deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%) !important;
border-top: 4px solid #111827;
border-bottom: 4px solid #111827;
}
.vb-accordion-five-shell {
max-width: 1040px;
margin: 0 auto;
}
.vb-accordion-five-intro {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 24px;
align-items: start;
margin-bottom: 34px;
}
.vb-accordion-five-intro > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 14px;
border: 1px solid #111827;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-accordion-five-intro h3 {
grid-column: 2;
margin: 0 !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-five-intro p {
grid-column: 2;
max-width: 620px;
margin: -8px 0 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-five-list {
border-top: 1px solid #cbd5e1;
}
.vb-accordion-five-item {
border-bottom: 1px solid #cbd5e1;
}
.vb-accordion-five-trigger {
display: grid;
grid-template-columns: 140px minmax(0, 1fr) 54px;
align-items: center;
gap: 22px;
width: 100%;
min-height: 92px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-five-label {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-accordion-five-title {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(22px, 3vw, 34px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.055em;
}
.vb-accordion-five-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border: 1px solid #111827;
border-radius: 0;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 24px;
font-weight: 800;
transform: rotate(0deg);
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-five-item.is-open .vb-accordion-five-trigger strong {
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
transform: rotate(90deg);
}
.vb-accordion-five-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-five-content {
display: grid;
grid-template-columns: 140px minmax(0, 1fr) 54px;
gap: 22px;
padding-bottom: 28px;
}
.vb-accordion-five-content p {
grid-column: 2;
max-width: 680px;
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.8;
font-weight: 650;
}
@media (max-width: 760px) {
.vb-accordion-five-demo {
padding: 24px 18px;
}
.vb-accordion-five-intro {
grid-template-columns: 1fr;
gap: 16px;
}
.vb-accordion-five-intro h3,
.vb-accordion-five-intro p {
grid-column: auto;
}
.vb-accordion-five-intro h3 {
font-size: 40px !important;
}
.vb-accordion-five-trigger {
grid-template-columns: 1fr 44px;
gap: 14px;
min-height: 82px;
}
.vb-accordion-five-label {
grid-column: 1 / -1;
padding-top: 18px;
}
.vb-accordion-five-trigger strong {
width: 44px;
height: 44px;
}
.vb-accordion-five-content {
grid-template-columns: 1fr;
padding-bottom: 22px;
}
.vb-accordion-five-content p {
grid-column: auto;
}
}
This minimal border accordion is useful for documentation pages, editorial websites, knowledge bases, product information sections, and service pages where the interface should stay clean and content-focused.
6. Color Block Category Accordion
A color block category accordion uses strong visual blocks to separate different content categories. This is useful for dashboards, learning platforms, feature sections, product guides, service pages, and support centers where each accordion item belongs to a clear topic.
This example looks different from a normal FAQ accordion because each item has its own color stripe, icon badge, clipped corner, and card-style content area. The JavaScript allows multiple category blocks to stay open at the same time.
- Color-coded accordion categories
- Multi-open JavaScript behavior
- Icon badge and clipped corner design
- Strong visual separation between items
- Useful for dashboards, guides, and feature sections
Example 06
Color Block Category Accordion
Open several colorful content categories at once and keep each topic visually separated.
Use this section to explain setup requirements, recommended defaults, onboarding steps, and the first actions a user should take.
Use best-practice blocks to guide users toward better decisions, cleaner layouts, faster workflows, and more reliable interaction patterns.
This block can explain layout bugs, missing content, animation issues, JavaScript conflicts, or mobile problems users may run into.
Advanced accordion sections can include nested panels, search support, keyboard controls, default open states, and custom animation timing.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-six]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-six-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-six-trigger");
const panel = item.querySelector(".vb-accordion-six-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-six-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-six-demo">
<div class="vb-accordion-six-shell" data-vb-accordion-six>
<div class="vb-accordion-six-header">
<span>Example 06</span>
<h3>Color Block Category Accordion</h3>
<p>Open several colorful content categories at once and keep each topic visually separated.</p>
</div>
<div class="vb-accordion-six-grid">
<article class="vb-accordion-six-item vb-accordion-six-blue is-open">
<button class="vb-accordion-six-trigger" type="button" aria-expanded="true">
<span class="vb-accordion-six-icon">⚙</span>
<span>
<strong>Setup options</strong>
<small>Installation, configuration, and first steps</small>
</span>
<em>+</em>
</button>
<div class="vb-accordion-six-panel">
<div class="vb-accordion-six-content">
<p>Use this section to explain setup requirements, recommended defaults, onboarding steps, and the first actions a user should take.</p>
</div>
</div>
</article>
<article class="vb-accordion-six-item vb-accordion-six-green">
<button class="vb-accordion-six-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-six-icon">✓</span>
<span>
<strong>Best practices</strong>
<small>Recommended usage and cleaner workflows</small>
</span>
<em>+</em>
</button>
<div class="vb-accordion-six-panel">
<div class="vb-accordion-six-content">
<p>Use best-practice blocks to guide users toward better decisions, cleaner layouts, faster workflows, and more reliable interaction patterns.</p>
</div>
</div>
</article>
<article class="vb-accordion-six-item vb-accordion-six-orange">
<button class="vb-accordion-six-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-six-icon">!</span>
<span>
<strong>Common issues</strong>
<small>Problems, mistakes, and troubleshooting</small>
</span>
<em>+</em>
</button>
<div class="vb-accordion-six-panel">
<div class="vb-accordion-six-content">
<p>This block can explain layout bugs, missing content, animation issues, JavaScript conflicts, or mobile problems users may run into.</p>
</div>
</div>
</article>
<article class="vb-accordion-six-item vb-accordion-six-purple">
<button class="vb-accordion-six-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-six-icon">★</span>
<span>
<strong>Advanced tips</strong>
<small>Extra ideas for polished UI components</small>
</span>
<em>+</em>
</button>
<div class="vb-accordion-six-panel">
<div class="vb-accordion-six-content">
<p>Advanced accordion sections can include nested panels, search support, keyboard controls, default open states, and custom animation timing.</p>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-six-demo,
.vb-accordion-six-demo * {
box-sizing: border-box;
}
.vb-accordion-six-demo {
margin: 28px 0;
padding: 34px;
border-radius: 40px;
background:
radial-gradient(circle at 20% 18%, rgba(59, 130, 246, 0.16), transparent 30%),
radial-gradient(circle at 86% 20%, rgba(168, 85, 247, 0.15), transparent 32%),
linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #ffffff 100%) !important;
border: 1px solid rgba(129, 140, 248, 0.24);
box-shadow: 0 24px 70px rgba(30, 41, 59, 0.10);
}
.vb-accordion-six-shell {
max-width: 1100px;
margin: 0 auto;
}
.vb-accordion-six-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 26px;
margin-bottom: 26px;
}
.vb-accordion-six-header span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-six-header h3 {
max-width: 680px;
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(36px, 5vw, 68px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-six-header p {
max-width: 330px;
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-six-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.vb-accordion-six-item {
position: relative;
overflow: hidden;
border-radius: 28px 28px 8px 28px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.vb-accordion-six-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 9px;
background: #2563eb;
}
.vb-accordion-six-item::after {
content: "";
position: absolute;
right: 0;
top: 0;
border-top: 34px solid #dbeafe;
border-left: 34px solid transparent;
}
.vb-accordion-six-green::before {
background: #10b981;
}
.vb-accordion-six-green::after {
border-top-color: #d1fae5;
}
.vb-accordion-six-orange::before {
background: #f97316;
}
.vb-accordion-six-orange::after {
border-top-color: #ffedd5;
}
.vb-accordion-six-purple::before {
background: #8b5cf6;
}
.vb-accordion-six-purple::after {
border-top-color: #ede9fe;
}
.vb-accordion-six-trigger {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 96px;
padding: 20px 22px 20px 28px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-six-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 20px;
background: #dbeafe;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 24px;
font-weight: 950;
}
.vb-accordion-six-green .vb-accordion-six-icon {
background: #d1fae5;
color: #047857 !important;
-webkit-text-fill-color: #047857 !important;
}
.vb-accordion-six-orange .vb-accordion-six-icon {
background: #ffedd5;
color: #c2410c !important;
-webkit-text-fill-color: #c2410c !important;
}
.vb-accordion-six-purple .vb-accordion-six-icon {
background: #ede9fe;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
}
.vb-accordion-six-trigger strong {
display: block;
margin-bottom: 5px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 21px;
line-height: 1.15;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-six-trigger small {
display: block;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
line-height: 1.4;
font-weight: 750;
}
.vb-accordion-six-trigger em {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: #f8fafc;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-style: normal;
font-size: 24px;
line-height: 1;
font-weight: 950;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-six-item.is-open .vb-accordion-six-trigger em {
transform: rotate(45deg);
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-six-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-six-content {
padding: 0 22px 22px 102px;
}
.vb-accordion-six-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 880px) {
.vb-accordion-six-header {
align-items: flex-start;
flex-direction: column;
}
.vb-accordion-six-header p {
max-width: 680px;
}
.vb-accordion-six-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-six-demo {
padding: 18px;
border-radius: 28px;
}
.vb-accordion-six-header h3 {
font-size: 38px !important;
}
.vb-accordion-six-trigger {
grid-template-columns: 48px minmax(0, 1fr) 38px;
min-height: 86px;
gap: 12px;
padding: 18px 18px 18px 24px;
}
.vb-accordion-six-icon {
width: 48px;
height: 48px;
border-radius: 16px;
}
.vb-accordion-six-trigger strong {
font-size: 18px;
}
.vb-accordion-six-trigger em {
width: 38px;
height: 38px;
}
.vb-accordion-six-content {
padding: 0 18px 18px 84px;
}
}
This color block category accordion is useful for feature explainers, learning modules, product guides, dashboard help panels, service categories, and support pages where each topic should feel visually distinct.
7. Mobile Filter Accordion
A mobile filter accordion is useful for ecommerce stores, directories, listing pages, travel websites, real estate pages, and product catalogs where filter controls take too much space on smaller screens.
This example uses a compact mobile-style filter drawer layout with expandable filter groups. The design uses a phone-like frame, rounded pill chips, a sticky action bar, and multi-open JavaScript behavior so users can open several filter groups at once.
- Mobile-friendly filter accordion
- Multi-open filter groups
- Filter chips and checkbox-style options
- Sticky apply/reset action bar
- Useful for ecommerce and listing pages
Example 07
Mobile Filters
Mobile Filter Accordion
Open product filter groups inside a compact mobile-first accordion layout.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-seven]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-seven-item"));
function updateItem(item) {
const trigger = item.querySelector(".vb-accordion-seven-trigger");
const panel = item.querySelector(".vb-accordion-seven-panel");
const isOpen = item.classList.contains("is-open");
trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const trigger = item.querySelector(".vb-accordion-seven-trigger");
trigger.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-seven-demo">
<div class="vb-accordion-seven-phone" data-vb-accordion-seven>
<div class="vb-accordion-seven-status">
<span>Example 07</span>
<strong>Mobile Filters</strong>
</div>
<div class="vb-accordion-seven-hero">
<h3>Mobile Filter Accordion</h3>
<p>Open product filter groups inside a compact mobile-first accordion layout.</p>
</div>
<div class="vb-accordion-seven-list">
<section class="vb-accordion-seven-item is-open">
<button class="vb-accordion-seven-trigger" type="button" aria-expanded="true">
<span>Category</span>
<em></em>
</button>
<div class="vb-accordion-seven-panel">
<div class="vb-accordion-seven-content">
<label><input type="checkbox"> Website templates</label>
<label><input type="checkbox"> UI components</label>
<label><input type="checkbox"> WordPress plugins</label>
</div>
</div>
</section>
<section class="vb-accordion-seven-item">
<button class="vb-accordion-seven-trigger" type="button" aria-expanded="false">
<span>Price range</span>
<em></em>
</button>
<div class="vb-accordion-seven-panel">
<div class="vb-accordion-seven-content">
<label><input type="checkbox"> Under €25</label>
<label><input type="checkbox"> €25 - €75</label>
<label><input type="checkbox"> Over €75</label>
</div>
</div>
</section>
<section class="vb-accordion-seven-item">
<button class="vb-accordion-seven-trigger" type="button" aria-expanded="false">
<span>Features</span>
<em></em>
</button>
<div class="vb-accordion-seven-panel">
<div class="vb-accordion-seven-content vb-accordion-seven-tags">
<button type="button">Responsive</button>
<button type="button">SEO ready</button>
<button type="button">Dark mode</button>
<button type="button">No framework</button>
</div>
</div>
</section>
<section class="vb-accordion-seven-item">
<button class="vb-accordion-seven-trigger" type="button" aria-expanded="false">
<span>Rating</span>
<em></em>
</button>
<div class="vb-accordion-seven-panel">
<div class="vb-accordion-seven-content">
<label><input type="checkbox"> 5 stars only</label>
<label><input type="checkbox"> 4 stars and up</label>
<label><input type="checkbox"> New products</label>
</div>
</div>
</section>
</div>
<div class="vb-accordion-seven-actions">
<button type="button">Reset</button>
<button type="button">Apply Filters</button>
</div>
</div>
</div>
CSS
.vb-accordion-seven-demo,
.vb-accordion-seven-demo * {
box-sizing: border-box;
}
.vb-accordion-seven-demo {
margin: 28px 0;
padding: 42px;
border-radius: 34px;
background:
radial-gradient(circle at 18% 18%, rgba(16, 185, 129, 0.20), transparent 32%),
radial-gradient(circle at 86% 22%, rgba(14, 165, 233, 0.18), transparent 34%),
linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 52%, #ffffff 100%) !important;
border: 1px solid rgba(125, 211, 252, 0.36);
box-shadow: 0 24px 70px rgba(6, 95, 70, 0.12);
}
.vb-accordion-seven-phone {
max-width: 430px;
margin: 0 auto;
padding: 16px;
border-radius: 42px;
background: #0f172a;
border: 8px solid #111827;
box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}
.vb-accordion-seven-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px 14px;
}
.vb-accordion-seven-status span {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.16);
color: #bbf7d0 !important;
-webkit-text-fill-color: #bbf7d0 !important;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-seven-status strong {
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-seven-hero {
padding: 24px;
border-radius: 30px;
background:
radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.22), transparent 34%),
linear-gradient(135deg, #10b981, #06b6d4) !important;
margin-bottom: 14px;
}
.vb-accordion-seven-hero h3 {
margin: 0 0 10px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 34px !important;
line-height: 0.96 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-accordion-seven-hero p {
margin: 0 !important;
color: #ecfeff !important;
-webkit-text-fill-color: #ecfeff !important;
font-size: 14px;
line-height: 1.55;
font-weight: 700;
}
.vb-accordion-seven-list {
display: grid;
gap: 10px;
margin-bottom: 12px;
}
.vb-accordion-seven-item {
overflow: hidden;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.18);
}
.vb-accordion-seven-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
min-height: 62px;
padding: 16px 18px;
border: 0;
background: #ffffff;
cursor: pointer;
text-align: left;
}
.vb-accordion-seven-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 17px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.03em;
}
.vb-accordion-seven-trigger em {
position: relative;
width: 34px;
height: 34px;
border-radius: 999px;
background: #ecfdf5;
border: 1px solid rgba(16, 185, 129, 0.18);
}
.vb-accordion-seven-trigger em::before,
.vb-accordion-seven-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: #059669;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.vb-accordion-seven-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-seven-item.is-open .vb-accordion-seven-trigger em::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.vb-accordion-seven-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-seven-content {
display: grid;
gap: 10px;
padding: 0 18px 18px;
}
.vb-accordion-seven-content label {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 10px 12px;
border-radius: 15px;
background: #f8fafc;
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
line-height: 1.35;
font-weight: 800;
}
.vb-accordion-seven-content input {
width: 17px;
height: 17px;
accent-color: #10b981;
}
.vb-accordion-seven-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vb-accordion-seven-tags button {
min-height: 36px;
padding: 8px 12px;
border: 0;
border-radius: 999px;
background: #ecfeff;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 13px;
font-weight: 900;
cursor: pointer;
}
.vb-accordion-seven-actions {
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 10px;
padding: 12px;
border-radius: 24px;
background: rgba(15, 23, 42, 0.90);
backdrop-filter: blur(14px);
}
.vb-accordion-seven-actions button {
min-height: 46px;
border: 0;
border-radius: 999px;
font-size: 13px;
font-weight: 950;
cursor: pointer;
}
.vb-accordion-seven-actions button:first-child {
background: rgba(255,255,255,0.10);
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
}
.vb-accordion-seven-actions button:last-child {
background: linear-gradient(135deg, #10b981, #06b6d4) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
@media (max-width: 640px) {
.vb-accordion-seven-demo {
padding: 18px;
border-radius: 26px;
}
.vb-accordion-seven-phone {
border-width: 5px;
border-radius: 32px;
}
}
This mobile filter accordion is ideal for ecommerce category pages, product catalogs, directories, real estate listings, travel search pages, job boards, and any mobile interface where filters need to stay compact.
8. Split Image Content Accordion
A split image content accordion combines expandable text with a strong visual area. It is useful for agency websites, service pages, product showcases, course landing pages, restaurant pages, travel sections, and feature explainers.
This example uses a split-screen layout with an abstract image card on the left and stacked accordion panels on the right. The visual card updates through active styling, while the accordion uses one-open-at-a-time JavaScript behavior.
- Split image and accordion layout
- One-open-at-a-time behavior
- Large visual illustration card
- Angled content panels
- Useful for services, products, and feature sections
Example 08
UI
JS
Split Image Content Accordion
Use a visual feature area beside expandable content panels for product or service explanations.
Explain the main value of a product, service, or interface section in a compact panel without making the page too long.
Use this panel to describe colors, layout choices, animations, responsive behavior, and important visual details.
The JavaScript controls active classes, ARIA values, max-height animation, and closing other panels when one opens.
This split accordion works well for service highlights, product features, course modules, agency processes, and startup landing pages.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-eight]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-eight-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-eight-trigger");
const panel = item.querySelector(".vb-accordion-eight-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-eight-trigger");
const panel = item.querySelector(".vb-accordion-eight-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-eight-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-eight-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-eight-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-eight-demo">
<div class="vb-accordion-eight-layout" data-vb-accordion-eight>
<div class="vb-accordion-eight-visual">
<span>Example 08</span>
<div class="vb-accordion-eight-art">
<div class="vb-accordion-eight-window">
<i></i>
<i></i>
<i></i>
</div>
<div class="vb-accordion-eight-floating vb-accordion-eight-floating-a">UI</div>
<div class="vb-accordion-eight-floating vb-accordion-eight-floating-b">JS</div>
</div>
</div>
<div class="vb-accordion-eight-content-wrap">
<div class="vb-accordion-eight-heading">
<h3>Split Image Content Accordion</h3>
<p>Use a visual feature area beside expandable content panels for product or service explanations.</p>
</div>
<div class="vb-accordion-eight-list">
<article class="vb-accordion-eight-item is-open">
<button class="vb-accordion-eight-trigger" type="button" aria-expanded="true">
<span>01</span>
<strong>Feature overview</strong>
<em>View</em>
</button>
<div class="vb-accordion-eight-panel">
<div class="vb-accordion-eight-content">
<p>Explain the main value of a product, service, or interface section in a compact panel without making the page too long.</p>
</div>
</div>
</article>
<article class="vb-accordion-eight-item">
<button class="vb-accordion-eight-trigger" type="button" aria-expanded="false">
<span>02</span>
<strong>Design details</strong>
<em>View</em>
</button>
<div class="vb-accordion-eight-panel">
<div class="vb-accordion-eight-content">
<p>Use this panel to describe colors, layout choices, animations, responsive behavior, and important visual details.</p>
</div>
</div>
</article>
<article class="vb-accordion-eight-item">
<button class="vb-accordion-eight-trigger" type="button" aria-expanded="false">
<span>03</span>
<strong>Technical setup</strong>
<em>View</em>
</button>
<div class="vb-accordion-eight-panel">
<div class="vb-accordion-eight-content">
<p>The JavaScript controls active classes, ARIA values, max-height animation, and closing other panels when one opens.</p>
</div>
</div>
</article>
<article class="vb-accordion-eight-item">
<button class="vb-accordion-eight-trigger" type="button" aria-expanded="false">
<span>04</span>
<strong>Best use cases</strong>
<em>View</em>
</button>
<div class="vb-accordion-eight-panel">
<div class="vb-accordion-eight-content">
<p>This split accordion works well for service highlights, product features, course modules, agency processes, and startup landing pages.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-eight-demo,
.vb-accordion-eight-demo * {
box-sizing: border-box;
}
.vb-accordion-eight-demo {
margin: 28px 0;
padding: 34px;
border-radius: 0 46px 46px 46px;
background:
linear-gradient(135deg, #faf5ff 0%, #eff6ff 48%, #ffffff 100%) !important;
border: 1px solid rgba(167, 139, 250, 0.28);
box-shadow: 0 24px 70px rgba(88, 28, 135, 0.10);
}
.vb-accordion-eight-layout {
display: grid;
grid-template-columns: minmax(290px, 0.92fr) minmax(0, 1.08fr);
gap: 26px;
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-eight-visual {
position: relative;
min-height: 620px;
padding: 28px;
border-radius: 0 44px 44px 44px;
background:
radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.30), transparent 32%),
linear-gradient(135deg, #581c87, #2563eb 58%, #06b6d4) !important;
overflow: hidden;
box-shadow: 0 28px 80px rgba(37, 99, 235, 0.22);
}
.vb-accordion-eight-visual > span {
display: inline-flex;
position: relative;
z-index: 2;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-eight-art {
position: absolute;
inset: 86px 28px 28px;
border-radius: 34px;
background:
radial-gradient(circle at 30% 24%, rgba(255,255,255,0.28), transparent 34%),
rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
}
.vb-accordion-eight-window {
position: absolute;
left: 28px;
right: 28px;
top: 76px;
height: 260px;
border-radius: 28px;
background: rgba(15, 23, 42, 0.68);
border: 1px solid rgba(255,255,255,0.16);
box-shadow: 0 28px 70px rgba(2, 6, 23, 0.28);
transform: rotate(-3deg);
}
.vb-accordion-eight-window::before {
content: "";
position: absolute;
left: 24px;
top: 24px;
width: 78px;
height: 14px;
border-radius: 999px;
background: #22d3ee;
box-shadow: 0 42px 0 rgba(255,255,255,0.22), 0 84px 0 rgba(255,255,255,0.16);
}
.vb-accordion-eight-window i {
position: absolute;
right: 24px;
height: 48px;
border-radius: 18px;
background: rgba(255,255,255,0.12);
}
.vb-accordion-eight-window i:nth-child(1) {
top: 24px;
width: 120px;
}
.vb-accordion-eight-window i:nth-child(2) {
top: 92px;
width: 170px;
}
.vb-accordion-eight-window i:nth-child(3) {
top: 160px;
width: 140px;
}
.vb-accordion-eight-floating {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
border-radius: 28px;
background: #ffffff;
color: #2563eb !important;
-webkit-text-fill-color: #2563eb !important;
font-size: 24px;
font-weight: 950;
box-shadow: 0 26px 60px rgba(2, 6, 23, 0.24);
}
.vb-accordion-eight-floating-a {
right: 42px;
top: 36px;
transform: rotate(8deg);
}
.vb-accordion-eight-floating-b {
left: 44px;
bottom: 54px;
color: #7c3aed !important;
-webkit-text-fill-color: #7c3aed !important;
transform: rotate(-8deg);
}
.vb-accordion-eight-content-wrap {
align-self: center;
}
.vb-accordion-eight-heading {
margin-bottom: 24px;
}
.vb-accordion-eight-heading h3 {
margin: 0 0 14px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(36px, 5vw, 66px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-eight-heading p {
max-width: 600px;
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-eight-list {
display: grid;
gap: 13px;
}
.vb-accordion-eight-item {
overflow: hidden;
border-radius: 26px 6px 26px 6px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
transition: transform 0.22s ease, border-color 0.22s ease;
}
.vb-accordion-eight-item.is-open {
transform: translateX(-8px);
border-color: rgba(37, 99, 235, 0.36);
}
.vb-accordion-eight-trigger {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 72px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 76px;
padding: 16px 18px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-eight-trigger span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 44px;
border-radius: 18px 4px 18px 4px;
background: #eff6ff;
color: #2563eb !important;
-webkit-text-fill-color: #2563eb !important;
font-size: 14px;
font-weight: 950;
}
.vb-accordion-eight-trigger strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 19px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-eight-trigger em {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 38px;
border-radius: 999px;
background: #f8fafc;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 12px;
font-style: normal;
font-weight: 950;
text-transform: uppercase;
}
.vb-accordion-eight-item.is-open .vb-accordion-eight-trigger em {
background: #2563eb;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-eight-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-eight-content {
padding: 0 18px 20px 86px;
}
.vb-accordion-eight-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 920px) {
.vb-accordion-eight-layout {
grid-template-columns: 1fr;
}
.vb-accordion-eight-visual {
min-height: 420px;
}
}
@media (max-width: 640px) {
.vb-accordion-eight-demo {
padding: 18px;
border-radius: 0 30px 30px 30px;
}
.vb-accordion-eight-visual {
min-height: 360px;
padding: 22px;
border-radius: 0 30px 30px 30px;
}
.vb-accordion-eight-heading h3 {
font-size: 38px !important;
}
.vb-accordion-eight-item.is-open {
transform: none;
}
.vb-accordion-eight-trigger {
grid-template-columns: 46px minmax(0, 1fr);
}
.vb-accordion-eight-trigger em {
grid-column: 2;
justify-self: start;
min-width: 70px;
}
.vb-accordion-eight-content {
padding: 0 18px 18px;
}
}
This split image content accordion is useful for landing pages, product features, agency service sections, startup pages, course previews, portfolio case studies, and any layout where expandable text should be supported by a strong visual block.
9. Dashboard Settings Accordion
A dashboard settings accordion is useful for admin panels, SaaS products, account pages, user dashboards, plugin settings screens, and app configuration pages. It keeps settings grouped into clear sections instead of showing every option at once.
This example uses a professional dashboard-style layout with a left settings summary, status badges, toggle switches, and expandable settings panels. The design is different from the previous examples because it looks like a real app settings screen rather than a marketing or FAQ section.
- Dashboard-style accordion layout
- Multi-open settings panels
- Toggle switch UI elements
- Status badges and app-style cards
- Useful for admin panels and SaaS dashboards
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-nine]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-nine-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-nine-trigger");
const panel = item.querySelector(".vb-accordion-nine-panel");
const badge = button.querySelector("em");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
badge.textContent = isOpen ? "Active" : "Open";
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-nine-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-nine-demo">
<div class="vb-accordion-nine-app" data-vb-accordion-nine>
<aside class="vb-accordion-nine-sidebar">
<span>Example 09</span>
<h3>Dashboard Settings Accordion</h3>
<p>Group app settings into expandable admin panels with clear status indicators.</p>
<div class="vb-accordion-nine-stats">
<div>
<strong>4</strong>
<small>Setting groups</small>
</div>
<div>
<strong>12</strong>
<small>Options</small>
</div>
</div>
</aside>
<main class="vb-accordion-nine-main">
<section class="vb-accordion-nine-item is-open">
<button class="vb-accordion-nine-trigger" type="button" aria-expanded="true">
<span>
<strong>Profile settings</strong>
<small>Public profile, avatar, and account details</small>
</span>
<em>Active</em>
</button>
<div class="vb-accordion-nine-panel">
<div class="vb-accordion-nine-content">
<label>
<span>Show public profile</span>
<input type="checkbox" checked>
</label>
<label>
<span>Display contact button</span>
<input type="checkbox" checked>
</label>
<label>
<span>Allow profile indexing</span>
<input type="checkbox">
</label>
</div>
</div>
</section>
<section class="vb-accordion-nine-item">
<button class="vb-accordion-nine-trigger" type="button" aria-expanded="false">
<span>
<strong>Notifications</strong>
<small>Email alerts, app messages, and weekly reports</small>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-nine-panel">
<div class="vb-accordion-nine-content">
<label>
<span>Email notifications</span>
<input type="checkbox" checked>
</label>
<label>
<span>Weekly summary</span>
<input type="checkbox">
</label>
<label>
<span>Security alerts</span>
<input type="checkbox" checked>
</label>
</div>
</div>
</section>
<section class="vb-accordion-nine-item">
<button class="vb-accordion-nine-trigger" type="button" aria-expanded="false">
<span>
<strong>Privacy controls</strong>
<small>Data visibility, tracking, and sharing options</small>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-nine-panel">
<div class="vb-accordion-nine-content">
<label>
<span>Anonymous usage analytics</span>
<input type="checkbox">
</label>
<label>
<span>Hide activity status</span>
<input type="checkbox" checked>
</label>
<label>
<span>Download account data</span>
<button type="button">Export</button>
</label>
</div>
</div>
</section>
<section class="vb-accordion-nine-item">
<button class="vb-accordion-nine-trigger" type="button" aria-expanded="false">
<span>
<strong>Billing preferences</strong>
<small>Invoices, payment method, and plan notices</small>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-nine-panel">
<div class="vb-accordion-nine-content">
<label>
<span>Send invoice by email</span>
<input type="checkbox" checked>
</label>
<label>
<span>Renewal reminders</span>
<input type="checkbox" checked>
</label>
<label>
<span>Payment method</span>
<button type="button">Update</button>
</label>
</div>
</div>
</section>
</main>
</div>
</div>
CSS
.vb-accordion-nine-demo,
.vb-accordion-nine-demo * {
box-sizing: border-box;
}
.vb-accordion-nine-demo {
margin: 28px 0;
padding: 34px;
border-radius: 32px;
background:
linear-gradient(135deg, #e2e8f0 0%, #f8fafc 52%, #ffffff 100%) !important;
border: 1px solid rgba(100, 116, 139, 0.24);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
}
.vb-accordion-nine-app {
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
gap: 18px;
max-width: 1120px;
margin: 0 auto;
padding: 14px;
border-radius: 28px;
background: #020617;
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.30);
}
.vb-accordion-nine-sidebar {
min-height: 610px;
padding: 26px;
border-radius: 22px;
background:
radial-gradient(circle at 20% 16%, rgba(59, 130, 246, 0.26), transparent 34%),
linear-gradient(135deg, #111827, #1e293b) !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vb-accordion-nine-sidebar > span {
align-self: flex-start;
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(59, 130, 246, 0.16);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-nine-sidebar h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 4vw, 56px) !important;
line-height: 0.96 !important;
font-weight: 950 !important;
letter-spacing: -0.075em;
}
.vb-accordion-nine-sidebar p {
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-nine-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 28px;
}
.vb-accordion-nine-stats div {
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
}
.vb-accordion-nine-stats strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 30px;
line-height: 1;
font-weight: 950;
}
.vb-accordion-nine-stats small {
display: block;
margin-top: 6px;
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
font-size: 12px;
font-weight: 800;
}
.vb-accordion-nine-main {
display: grid;
align-content: start;
gap: 12px;
padding: 10px;
}
.vb-accordion-nine-item {
overflow: hidden;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.18);
}
.vb-accordion-nine-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 84px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 78px;
padding: 18px 20px;
border: 0;
background: #ffffff;
text-align: left;
cursor: pointer;
}
.vb-accordion-nine-trigger strong {
display: block;
margin-bottom: 4px;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 19px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-nine-trigger small {
display: block;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
line-height: 1.4;
font-weight: 750;
}
.vb-accordion-nine-trigger em {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 34px;
border-radius: 10px;
background: #f1f5f9;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 12px;
font-style: normal;
font-weight: 950;
text-transform: uppercase;
}
.vb-accordion-nine-item.is-open .vb-accordion-nine-trigger em {
background: #2563eb;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-nine-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-nine-content {
display: grid;
gap: 10px;
padding: 0 20px 20px;
}
.vb-accordion-nine-content label {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 50px;
padding: 12px 14px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.vb-accordion-nine-content label span {
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
font-weight: 850;
}
.vb-accordion-nine-content input[type="checkbox"] {
position: relative;
appearance: none;
width: 46px;
height: 26px;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
transition: background 0.2s ease;
}
.vb-accordion-nine-content input[type="checkbox"]::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: 3px;
top: 3px;
border-radius: 999px;
background: #ffffff;
transition: transform 0.2s ease;
}
.vb-accordion-nine-content input[type="checkbox"]:checked {
background: #2563eb;
}
.vb-accordion-nine-content input[type="checkbox"]:checked::before {
transform: translateX(20px);
}
.vb-accordion-nine-content button {
min-height: 34px;
padding: 8px 14px;
border: 0;
border-radius: 10px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 900px) {
.vb-accordion-nine-app {
grid-template-columns: 1fr;
}
.vb-accordion-nine-sidebar {
min-height: auto;
}
}
@media (max-width: 640px) {
.vb-accordion-nine-demo {
padding: 18px;
border-radius: 24px;
}
.vb-accordion-nine-app {
padding: 10px;
border-radius: 22px;
}
.vb-accordion-nine-sidebar {
padding: 22px;
}
.vb-accordion-nine-sidebar h3 {
font-size: 38px !important;
}
.vb-accordion-nine-trigger {
grid-template-columns: 1fr;
}
.vb-accordion-nine-trigger em {
justify-self: start;
min-width: 76px;
}
}
This dashboard settings accordion is useful for SaaS dashboards, plugin settings pages, account areas, admin interfaces, profile pages, billing screens, and app configuration panels.
10. Pricing FAQ Accordion
A pricing FAQ accordion helps answer common buying questions near a pricing section. It is useful for SaaS pricing pages, agency service packages, subscription products, memberships, hosting plans, and digital product sales pages.
This example uses a premium pricing layout with a price card, highlighted plan badge, angled FAQ rows, and one-open-at-a-time JavaScript behavior. The visual structure is different from standard FAQ accordions because it connects the expandable questions directly with a conversion-focused pricing card.
- Pricing-focused FAQ accordion
- One-open-at-a-time behavior
- Plan card and CTA section
- Angled question rows
- Useful for SaaS, subscriptions, and service packages
Example 10
Pro Plan
For growing websites, product teams, and businesses that need more advanced UI sections.
€29
/ month
- Unlimited UI components
- Responsive templates
- Priority updates
Pricing FAQ Accordion
Answer purchase questions beside a pricing card and keep the conversion section compact.
Yes. Users can cancel the subscription whenever they want. The plan remains active until the end of the current billing period.
Yes. Active users receive product updates, new examples, improvements, bug fixes, and upgraded UI components as they are released.
Yes. You can adapt the layouts and JavaScript patterns for client websites, landing pages, dashboards, and custom interface projects.
The code uses vanilla JavaScript, structured HTML, and plain CSS, so it is easier to understand, edit, and reuse without extra frameworks.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-ten]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-ten-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-ten-trigger");
const panel = item.querySelector(".vb-accordion-ten-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-ten-trigger");
const panel = item.querySelector(".vb-accordion-ten-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-ten-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-ten-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-ten-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-ten-demo">
<div class="vb-accordion-ten-layout" data-vb-accordion-ten>
<div class="vb-accordion-ten-card">
<span>Example 10</span>
<h3>Pro Plan</h3>
<p>For growing websites, product teams, and businesses that need more advanced UI sections.</p>
<div class="vb-accordion-ten-price">
<strong>€29</strong>
<small>/ month</small>
</div>
<ul>
<li>Unlimited UI components</li>
<li>Responsive templates</li>
<li>Priority updates</li>
</ul>
<a href="#javascript-accordion-examples">Start Building</a>
</div>
<div class="vb-accordion-ten-faq">
<div class="vb-accordion-ten-heading">
<h3>Pricing FAQ Accordion</h3>
<p>Answer purchase questions beside a pricing card and keep the conversion section compact.</p>
</div>
<div class="vb-accordion-ten-list">
<section class="vb-accordion-ten-item is-open">
<button class="vb-accordion-ten-trigger" type="button" aria-expanded="true">
<span>Can I cancel anytime?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-ten-panel">
<div class="vb-accordion-ten-content">
<p>Yes. Users can cancel the subscription whenever they want. The plan remains active until the end of the current billing period.</p>
</div>
</div>
</section>
<section class="vb-accordion-ten-item">
<button class="vb-accordion-ten-trigger" type="button" aria-expanded="false">
<span>Do I get future updates?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-ten-panel">
<div class="vb-accordion-ten-content">
<p>Yes. Active users receive product updates, new examples, improvements, bug fixes, and upgraded UI components as they are released.</p>
</div>
</div>
</section>
<section class="vb-accordion-ten-item">
<button class="vb-accordion-ten-trigger" type="button" aria-expanded="false">
<span>Can I use this for client projects?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-ten-panel">
<div class="vb-accordion-ten-content">
<p>Yes. You can adapt the layouts and JavaScript patterns for client websites, landing pages, dashboards, and custom interface projects.</p>
</div>
</div>
</section>
<section class="vb-accordion-ten-item">
<button class="vb-accordion-ten-trigger" type="button" aria-expanded="false">
<span>Is the code beginner friendly?</span>
<strong>+</strong>
</button>
<div class="vb-accordion-ten-panel">
<div class="vb-accordion-ten-content">
<p>The code uses vanilla JavaScript, structured HTML, and plain CSS, so it is easier to understand, edit, and reuse without extra frameworks.</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-ten-demo,
.vb-accordion-ten-demo * {
box-sizing: border-box;
}
.vb-accordion-ten-demo {
margin: 28px 0;
padding: 36px;
border-radius: 46px 12px 46px 12px;
background:
radial-gradient(circle at 16% 20%, rgba(250, 204, 21, 0.22), transparent 32%),
radial-gradient(circle at 84% 18%, rgba(249, 115, 22, 0.18), transparent 34%),
linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, #ffffff 100%) !important;
border: 1px solid rgba(253, 186, 116, 0.42);
box-shadow: 0 24px 70px rgba(146, 64, 14, 0.12);
}
.vb-accordion-ten-layout {
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
align-items: stretch;
}
.vb-accordion-ten-card {
position: relative;
overflow: hidden;
padding: 30px;
border-radius: 38px 10px 38px 10px;
background:
radial-gradient(circle at 24% 18%, rgba(255,255,255,0.28), transparent 32%),
linear-gradient(135deg, #78350f, #ea580c 60%, #facc15) !important;
box-shadow: 0 30px 90px rgba(154, 52, 18, 0.24);
}
.vb-accordion-ten-card::after {
content: "";
position: absolute;
right: -72px;
top: -72px;
width: 180px;
height: 180px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
}
.vb-accordion-ten-card > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.20);
color: #fff7ed !important;
-webkit-text-fill-color: #fff7ed !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-ten-card h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 5vw, 68px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-ten-card p {
margin: 0 0 24px !important;
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-ten-price {
display: flex;
align-items: end;
gap: 8px;
margin-bottom: 22px;
}
.vb-accordion-ten-price strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 74px;
line-height: 0.9;
font-weight: 950;
letter-spacing: -0.09em;
}
.vb-accordion-ten-price small {
color: #fed7aa !important;
-webkit-text-fill-color: #fed7aa !important;
font-size: 15px;
font-weight: 850;
}
.vb-accordion-ten-card ul {
display: grid;
gap: 10px;
margin: 0 0 24px !important;
padding: 0 !important;
list-style: none !important;
}
.vb-accordion-ten-card li {
margin: 0 !important;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.13);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 850;
}
.vb-accordion-ten-card a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 50px;
border-radius: 999px;
background: #ffffff;
color: #c2410c !important;
-webkit-text-fill-color: #c2410c !important;
font-size: 14px;
font-weight: 950;
text-decoration: none !important;
}
.vb-accordion-ten-faq {
align-self: center;
}
.vb-accordion-ten-heading {
margin-bottom: 22px;
}
.vb-accordion-ten-heading h3 {
margin: 0 0 12px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(36px, 5vw, 64px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-ten-heading p {
max-width: 590px;
margin: 0 !important;
color: #57534e !important;
-webkit-text-fill-color: #57534e !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-ten-list {
display: grid;
gap: 13px;
}
.vb-accordion-ten-item {
overflow: hidden;
border-radius: 18px 4px 18px 4px;
background: #ffffff;
border: 1px solid rgba(253, 186, 116, 0.36);
box-shadow: 0 16px 42px rgba(154, 52, 18, 0.08);
}
.vb-accordion-ten-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 70px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-ten-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
line-height: 1.25;
font-weight: 950;
letter-spacing: -0.035em;
}
.vb-accordion-ten-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px 2px 12px 2px;
background: #ffedd5;
color: #c2410c !important;
-webkit-text-fill-color: #c2410c !important;
font-size: 24px;
line-height: 1;
font-weight: 950;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-ten-item.is-open .vb-accordion-ten-trigger strong {
transform: rotate(45deg);
background: #ea580c;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-ten-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-ten-content {
padding: 0 20px 20px;
}
.vb-accordion-ten-content p {
margin: 0 !important;
color: #57534e !important;
-webkit-text-fill-color: #57534e !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 900px) {
.vb-accordion-ten-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-ten-demo {
padding: 18px;
border-radius: 32px 10px 32px 10px;
}
.vb-accordion-ten-card {
padding: 24px;
}
.vb-accordion-ten-heading h3 {
font-size: 38px !important;
}
.vb-accordion-ten-price strong {
font-size: 58px;
}
}
This pricing FAQ accordion is useful for SaaS pricing pages, service packages, membership plans, hosting offers, digital product pages, course pricing sections, and conversion-focused landing pages.
11. Documentation Sidebar Accordion
A documentation sidebar accordion is useful for help centers, developer docs, knowledge bases, plugin documentation, API guides, and tutorial libraries. It keeps many navigation topics compact while still letting users expand the section they need.
This example uses a documentation-style layout with a sticky-looking left sidebar, active navigation groups, small status labels, and one-open-at-a-time JavaScript behavior. The design is intentionally more structured and technical than a standard FAQ accordion.
- Documentation-style accordion navigation
- One-open-at-a-time behavior
- Sidebar layout with content preview
- Small labels and active section states
- Useful for docs, help centers, and tutorials
Documentation Sidebar Accordion
Use expandable navigation groups to organize documentation topics, tutorials, plugin settings, component guides, and support resources.
Current section
Getting started
Navigation items
12 links
Behavior
Single open
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-eleven]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-eleven-item"));
function closeItem(item) {
const trigger = item.querySelector(".vb-accordion-eleven-trigger");
const panel = item.querySelector(".vb-accordion-eleven-panel");
item.classList.remove("is-open");
trigger.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const trigger = item.querySelector(".vb-accordion-eleven-trigger");
const panel = item.querySelector(".vb-accordion-eleven-panel");
item.classList.add("is-open");
trigger.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const trigger = item.querySelector(".vb-accordion-eleven-trigger");
trigger.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-eleven-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-eleven-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-eleven-demo">
<div class="vb-accordion-eleven-docs" data-vb-accordion-eleven>
<aside class="vb-accordion-eleven-sidebar">
<div class="vb-accordion-eleven-brand">
<span>Example 11</span>
<h3>Docs Menu</h3>
</div>
<nav class="vb-accordion-eleven-nav">
<section class="vb-accordion-eleven-item is-open">
<button class="vb-accordion-eleven-trigger" type="button" aria-expanded="true">
<span>Getting started</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-eleven-panel">
<div class="vb-accordion-eleven-links">
<a href="#javascript-accordion-examples">Installation</a>
<a href="#javascript-accordion-examples">Basic structure</a>
<a href="#javascript-accordion-examples">First accordion</a>
</div>
</div>
</section>
<section class="vb-accordion-eleven-item">
<button class="vb-accordion-eleven-trigger" type="button" aria-expanded="false">
<span>Components</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-eleven-panel">
<div class="vb-accordion-eleven-links">
<a href="#javascript-accordion-examples">FAQ accordion</a>
<a href="#javascript-accordion-examples">Product accordion</a>
<a href="#javascript-accordion-examples">Nested accordion</a>
</div>
</div>
</section>
<section class="vb-accordion-eleven-item">
<button class="vb-accordion-eleven-trigger" type="button" aria-expanded="false">
<span>Customization</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-eleven-panel">
<div class="vb-accordion-eleven-links">
<a href="#javascript-accordion-examples">Colors</a>
<a href="#javascript-accordion-examples">Animation speed</a>
<a href="#javascript-accordion-examples">Icons</a>
</div>
</div>
</section>
<section class="vb-accordion-eleven-item">
<button class="vb-accordion-eleven-trigger" type="button" aria-expanded="false">
<span>Advanced usage</span>
<strong>⌄</strong>
</button>
<div class="vb-accordion-eleven-panel">
<div class="vb-accordion-eleven-links">
<a href="#javascript-accordion-examples">ARIA states</a>
<a href="#javascript-accordion-examples">Multiple instances</a>
<a href="#javascript-accordion-examples">Dynamic content</a>
</div>
</div>
</section>
</nav>
</aside>
<main class="vb-accordion-eleven-content">
<span>Documentation UI</span>
<h3>Documentation Sidebar Accordion</h3>
<p>Use expandable navigation groups to organize documentation topics, tutorials, plugin settings, component guides, and support resources.</p>
<div class="vb-accordion-eleven-preview">
<div>
<strong>Current section</strong>
<small>Getting started</small>
</div>
<div>
<strong>Navigation items</strong>
<small>12 links</small>
</div>
<div>
<strong>Behavior</strong>
<small>Single open</small>
</div>
</div>
</main>
</div>
</div>
CSS
.vb-accordion-eleven-demo,
.vb-accordion-eleven-demo * {
box-sizing: border-box;
}
.vb-accordion-eleven-demo {
margin: 28px 0;
padding: 34px;
border-radius: 24px;
background:
linear-gradient(135deg, #f8fafc 0%, #eef2ff 54%, #ffffff 100%) !important;
border: 1px solid rgba(99, 102, 241, 0.20);
box-shadow: 0 24px 70px rgba(30, 41, 59, 0.10);
}
.vb-accordion-eleven-docs {
display: grid;
grid-template-columns: 310px minmax(0, 1fr);
gap: 18px;
max-width: 1120px;
margin: 0 auto;
padding: 14px;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}
.vb-accordion-eleven-sidebar {
padding: 18px;
border-radius: 16px;
background:
linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}
.vb-accordion-eleven-brand {
padding: 10px 10px 18px;
border-bottom: 1px solid rgba(255,255,255,0.12);
margin-bottom: 14px;
}
.vb-accordion-eleven-brand span {
display: inline-flex;
margin-bottom: 12px;
padding: 7px 10px;
border-radius: 8px;
background: rgba(99, 102, 241, 0.18);
color: #c7d2fe !important;
-webkit-text-fill-color: #c7d2fe !important;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-eleven-brand h3 {
margin: 0 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 34px !important;
line-height: 0.96 !important;
font-weight: 950 !important;
letter-spacing: -0.07em;
}
.vb-accordion-eleven-nav {
display: grid;
gap: 8px;
}
.vb-accordion-eleven-item {
overflow: hidden;
border-radius: 14px;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.08);
}
.vb-accordion-eleven-item.is-open {
background: rgba(99, 102, 241, 0.16);
border-color: rgba(129, 140, 248, 0.28);
}
.vb-accordion-eleven-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 32px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 12px 12px 12px 14px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-eleven-trigger span {
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 14px;
line-height: 1.25;
font-weight: 850;
}
.vb-accordion-eleven-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(255,255,255,0.08);
color: #c7d2fe !important;
-webkit-text-fill-color: #c7d2fe !important;
font-size: 20px;
font-weight: 950;
transform: rotate(0deg);
transition: transform 0.22s ease, background 0.22s ease;
}
.vb-accordion-eleven-item.is-open .vb-accordion-eleven-trigger strong {
transform: rotate(180deg);
background: rgba(129, 140, 248, 0.26);
}
.vb-accordion-eleven-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-eleven-links {
display: grid;
gap: 4px;
padding: 0 12px 12px 28px;
}
.vb-accordion-eleven-links a {
display: flex;
align-items: center;
min-height: 34px;
padding: 7px 10px;
border-radius: 9px;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 13px;
line-height: 1.25;
font-weight: 750;
text-decoration: none !important;
}
.vb-accordion-eleven-links a:hover {
background: rgba(255,255,255,0.08);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-eleven-content {
padding: 34px;
border-radius: 16px;
background:
radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.14), transparent 34%),
linear-gradient(135deg, #ffffff, #f8fafc) !important;
}
.vb-accordion-eleven-content > span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 8px;
background: #eef2ff;
color: #4f46e5 !important;
-webkit-text-fill-color: #4f46e5 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-eleven-content h3 {
max-width: 680px;
margin: 0 0 14px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(36px, 5vw, 66px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-eleven-content p {
max-width: 660px;
margin: 0 0 26px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-eleven-preview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vb-accordion-eleven-preview div {
padding: 18px;
border-radius: 16px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.vb-accordion-eleven-preview strong {
display: block;
margin-bottom: 7px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 14px;
font-weight: 950;
}
.vb-accordion-eleven-preview small {
display: block;
color: #6366f1 !important;
-webkit-text-fill-color: #6366f1 !important;
font-size: 13px;
font-weight: 850;
}
@media (max-width: 900px) {
.vb-accordion-eleven-docs {
grid-template-columns: 1fr;
}
.vb-accordion-eleven-preview {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-eleven-demo {
padding: 18px;
}
.vb-accordion-eleven-docs {
padding: 10px;
}
.vb-accordion-eleven-content {
padding: 22px;
}
.vb-accordion-eleven-content h3 {
font-size: 38px !important;
}
}
This documentation sidebar accordion is useful for help centers, plugin docs, SaaS support areas, developer documentation, onboarding guides, tutorial libraries, and knowledge base navigation.
12. Neon Card Stack Accordion
A neon card stack accordion creates a bold visual style for modern landing pages, creative portfolios, AI tools, gaming websites, tech products, and promotional sections. It uses overlapping cards, neon borders, and animated active states.
This example uses a stacked card layout with offset panels, glowing category badges, and multi-open JavaScript behavior. Each accordion row feels like a separate interactive card instead of a standard list item.
- Neon stacked card accordion
- Multi-open JavaScript behavior
- Overlapping card depth effect
- Glowing badges and active states
- Useful for tech, AI, gaming, and creative websites
Example 12
Neon Card Stack Accordion
Open glowing stacked cards to reveal feature details inside a high-impact visual section.
Use this card to explain automation features, assistant workflows, content generation, smart recommendations, or AI-powered product logic.
Highlight interactive UI behavior, smooth transitions, better content organization, and cleaner user journeys for visitors.
Show how connected data, integrations, APIs, dashboards, and external services can be explained in expandable content cards.
Use accordion content carefully for FAQs, entity explanations, structured content, product questions, and readable long-form sections.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twelve]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twelve-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-twelve-trigger");
const panel = item.querySelector(".vb-accordion-twelve-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twelve-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-twelve-demo">
<div class="vb-accordion-twelve-shell" data-vb-accordion-twelve>
<div class="vb-accordion-twelve-header">
<span>Example 12</span>
<h3>Neon Card Stack Accordion</h3>
<p>Open glowing stacked cards to reveal feature details inside a high-impact visual section.</p>
</div>
<div class="vb-accordion-twelve-stack">
<article class="vb-accordion-twelve-item is-open">
<button class="vb-accordion-twelve-trigger" type="button" aria-expanded="true">
<span>AI</span>
<strong>Smart automation</strong>
<em></em>
</button>
<div class="vb-accordion-twelve-panel">
<div class="vb-accordion-twelve-content">
<p>Use this card to explain automation features, assistant workflows, content generation, smart recommendations, or AI-powered product logic.</p>
</div>
</div>
</article>
<article class="vb-accordion-twelve-item">
<button class="vb-accordion-twelve-trigger" type="button" aria-expanded="false">
<span>UX</span>
<strong>Interactive interface</strong>
<em></em>
</button>
<div class="vb-accordion-twelve-panel">
<div class="vb-accordion-twelve-content">
<p>Highlight interactive UI behavior, smooth transitions, better content organization, and cleaner user journeys for visitors.</p>
</div>
</div>
</article>
<article class="vb-accordion-twelve-item">
<button class="vb-accordion-twelve-trigger" type="button" aria-expanded="false">
<span>API</span>
<strong>Connected systems</strong>
<em></em>
</button>
<div class="vb-accordion-twelve-panel">
<div class="vb-accordion-twelve-content">
<p>Show how connected data, integrations, APIs, dashboards, and external services can be explained in expandable content cards.</p>
</div>
</div>
</article>
<article class="vb-accordion-twelve-item">
<button class="vb-accordion-twelve-trigger" type="button" aria-expanded="false">
<span>SEO</span>
<strong>Content visibility</strong>
<em></em>
</button>
<div class="vb-accordion-twelve-panel">
<div class="vb-accordion-twelve-content">
<p>Use accordion content carefully for FAQs, entity explanations, structured content, product questions, and readable long-form sections.</p>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-twelve-demo,
.vb-accordion-twelve-demo * {
box-sizing: border-box;
}
.vb-accordion-twelve-demo {
margin: 28px 0;
padding: 44px;
border-radius: 52px;
background:
radial-gradient(circle at 18% 18%, rgba(236, 72, 153, 0.24), transparent 34%),
radial-gradient(circle at 84% 22%, rgba(34, 211, 238, 0.22), transparent 34%),
linear-gradient(135deg, #020617 0%, #111827 46%, #2e1065 100%) !important;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
overflow: hidden;
}
.vb-accordion-twelve-shell {
max-width: 1040px;
margin: 0 auto;
}
.vb-accordion-twelve-header {
max-width: 760px;
margin-bottom: 28px;
}
.vb-accordion-twelve-header span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(236, 72, 153, 0.16);
border: 1px solid rgba(244, 114, 182, 0.28);
color: #fbcfe8 !important;
-webkit-text-fill-color: #fbcfe8 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twelve-header h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-twelve-header p {
max-width: 650px;
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twelve-stack {
display: grid;
gap: 16px;
perspective: 1000px;
}
.vb-accordion-twelve-item {
position: relative;
overflow: hidden;
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 22px 54px rgba(0,0,0,0.22);
transform: translateX(0);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.vb-accordion-twelve-item:nth-child(2) {
margin-left: 24px;
}
.vb-accordion-twelve-item:nth-child(3) {
margin-left: 48px;
}
.vb-accordion-twelve-item:nth-child(4) {
margin-left: 72px;
}
.vb-accordion-twelve-item::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(236, 72, 153, 0.45), rgba(34, 211, 238, 0.38), rgba(168, 85, 247, 0.40)) !important;
opacity: 0;
transition: opacity 0.22s ease;
}
.vb-accordion-twelve-item.is-open {
transform: translateX(-10px);
border-color: rgba(34, 211, 238, 0.46);
box-shadow: 0 28px 76px rgba(34, 211, 238, 0.12);
}
.vb-accordion-twelve-item.is-open::before {
opacity: 0.16;
}
.vb-accordion-twelve-trigger {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 44px;
align-items: center;
gap: 18px;
width: 100%;
min-height: 82px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twelve-trigger span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 46px;
border-radius: 18px;
background: rgba(236, 72, 153, 0.18);
border: 1px solid rgba(244, 114, 182, 0.28);
color: #f9a8d4 !important;
-webkit-text-fill-color: #f9a8d4 !important;
font-size: 14px;
font-weight: 950;
letter-spacing: 0.08em;
}
.vb-accordion-twelve-trigger strong {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
font-size: 21px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twelve-trigger em {
position: relative;
width: 44px;
height: 44px;
border-radius: 16px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.14);
}
.vb-accordion-twelve-trigger em::before,
.vb-accordion-twelve-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
border-radius: 999px;
background: #ffffff;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-twelve-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twelve-item.is-open .vb-accordion-twelve-trigger em {
background: linear-gradient(135deg, #ec4899, #22d3ee) !important;
}
.vb-accordion-twelve-item.is-open .vb-accordion-twelve-trigger em::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.vb-accordion-twelve-panel {
position: relative;
z-index: 2;
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twelve-content {
padding: 0 24px 24px 102px;
}
.vb-accordion-twelve-content p {
max-width: 720px;
margin: 0 !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 760px) {
.vb-accordion-twelve-demo {
padding: 22px;
border-radius: 34px;
}
.vb-accordion-twelve-header h3 {
font-size: 40px !important;
}
.vb-accordion-twelve-item,
.vb-accordion-twelve-item:nth-child(2),
.vb-accordion-twelve-item:nth-child(3),
.vb-accordion-twelve-item:nth-child(4) {
margin-left: 0;
}
.vb-accordion-twelve-item.is-open {
transform: none;
}
.vb-accordion-twelve-trigger {
grid-template-columns: 54px minmax(0, 1fr) 38px;
gap: 12px;
}
.vb-accordion-twelve-trigger span {
width: 54px;
height: 42px;
}
.vb-accordion-twelve-trigger strong {
font-size: 17px;
}
.vb-accordion-twelve-trigger em {
width: 38px;
height: 38px;
}
.vb-accordion-twelve-content {
padding: 0 18px 20px;
}
}
This neon card stack accordion is useful for AI product pages, technology websites, gaming landing pages, creative portfolios, startup websites, and bold feature sections where the accordion should feel more visual and energetic.
13. Support Center Accordion
A support center accordion is useful for customer help pages, SaaS support sections, ecommerce help centers, plugin support pages, and service websites where users need quick answers grouped by topic.
This example uses a help-desk inspired layout with a support ticket card, category badges, soft rounded panels, and one-open-at-a-time JavaScript behavior. The design is calmer and more service-oriented than the previous neon and dashboard examples.
- Support center accordion layout
- One-open-at-a-time behavior
- Help ticket visual card
- Category badges and soft panels
- Useful for FAQ, support, and help center pages
Example 13
Need Help?
Find quick answers before opening a support ticket.
#SUP-2048
Average reply time: 2 hours
3 agents online
Support Center Accordion
Organize help questions into expandable support topics with clear category labels.
Go to the login page, choose the password reset option, enter your account email, and follow the secure link sent to your inbox.
Invoices are usually available inside the billing section of the account dashboard. You can download PDF invoices for each completed payment.
Check that the JavaScript selector matches the HTML attribute, the script is loaded after the HTML, and no duplicate class names conflict with another accordion.
Active customers can receive updates through the account dashboard, download area, email notifications, or the product update page.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-thirteen]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-thirteen-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-thirteen-trigger");
const panel = item.querySelector(".vb-accordion-thirteen-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-thirteen-trigger");
const panel = item.querySelector(".vb-accordion-thirteen-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-thirteen-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-thirteen-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-thirteen-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-thirteen-demo">
<div class="vb-accordion-thirteen-help" data-vb-accordion-thirteen>
<div class="vb-accordion-thirteen-card">
<span>Example 13</span>
<h3>Need Help?</h3>
<p>Find quick answers before opening a support ticket.</p>
<div class="vb-accordion-thirteen-ticket">
<strong>#SUP-2048</strong>
<small>Average reply time: 2 hours</small>
</div>
<div class="vb-accordion-thirteen-agents">
<i></i>
<i></i>
<i></i>
<em>3 agents online</em>
</div>
</div>
<div class="vb-accordion-thirteen-main">
<div class="vb-accordion-thirteen-heading">
<h3>Support Center Accordion</h3>
<p>Organize help questions into expandable support topics with clear category labels.</p>
</div>
<div class="vb-accordion-thirteen-list">
<section class="vb-accordion-thirteen-item is-open">
<button class="vb-accordion-thirteen-trigger" type="button" aria-expanded="true">
<span>
<small>Account</small>
<strong>How do I reset my password?</strong>
</span>
<em></em>
</button>
<div class="vb-accordion-thirteen-panel">
<div class="vb-accordion-thirteen-content">
<p>Go to the login page, choose the password reset option, enter your account email, and follow the secure link sent to your inbox.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirteen-item">
<button class="vb-accordion-thirteen-trigger" type="button" aria-expanded="false">
<span>
<small>Billing</small>
<strong>Where can I download invoices?</strong>
</span>
<em></em>
</button>
<div class="vb-accordion-thirteen-panel">
<div class="vb-accordion-thirteen-content">
<p>Invoices are usually available inside the billing section of the account dashboard. You can download PDF invoices for each completed payment.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirteen-item">
<button class="vb-accordion-thirteen-trigger" type="button" aria-expanded="false">
<span>
<small>Technical</small>
<strong>Why is my component not opening?</strong>
</span>
<em></em>
</button>
<div class="vb-accordion-thirteen-panel">
<div class="vb-accordion-thirteen-content">
<p>Check that the JavaScript selector matches the HTML attribute, the script is loaded after the HTML, and no duplicate class names conflict with another accordion.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirteen-item">
<button class="vb-accordion-thirteen-trigger" type="button" aria-expanded="false">
<span>
<small>Updates</small>
<strong>How do I get product updates?</strong>
</span>
<em></em>
</button>
<div class="vb-accordion-thirteen-panel">
<div class="vb-accordion-thirteen-content">
<p>Active customers can receive updates through the account dashboard, download area, email notifications, or the product update page.</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-thirteen-demo,
.vb-accordion-thirteen-demo * {
box-sizing: border-box;
}
.vb-accordion-thirteen-demo {
margin: 28px 0;
padding: 36px;
border-radius: 30px;
background:
radial-gradient(circle at 14% 18%, rgba(14, 165, 233, 0.18), transparent 32%),
radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.16), transparent 34%),
linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 52%, #ffffff 100%) !important;
border: 1px solid rgba(125, 211, 252, 0.36);
box-shadow: 0 24px 70px rgba(8, 47, 73, 0.10);
}
.vb-accordion-thirteen-help {
display: grid;
grid-template-columns: minmax(270px, 0.75fr) minmax(0, 1.25fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-thirteen-card {
align-self: start;
padding: 28px;
border-radius: 30px;
background:
radial-gradient(circle at 20% 18%, rgba(255,255,255,0.28), transparent 34%),
linear-gradient(135deg, #0369a1, #0f766e) !important;
box-shadow: 0 28px 80px rgba(8, 145, 178, 0.22);
}
.vb-accordion-thirteen-card > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.20);
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-thirteen-card h3 {
margin: 0 0 12px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 5vw, 68px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-thirteen-card p {
margin: 0 0 24px !important;
color: #ccfbf1 !important;
-webkit-text-fill-color: #ccfbf1 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-thirteen-ticket {
padding: 18px;
border-radius: 22px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.18);
margin-bottom: 20px;
}
.vb-accordion-thirteen-ticket strong {
display: block;
margin-bottom: 6px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-thirteen-ticket small {
color: #d1fae5 !important;
-webkit-text-fill-color: #d1fae5 !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-thirteen-agents {
display: flex;
align-items: center;
}
.vb-accordion-thirteen-agents i {
display: inline-flex;
width: 42px;
height: 42px;
margin-right: -10px;
border-radius: 999px;
border: 3px solid rgba(255,255,255,0.82);
background: linear-gradient(135deg, #bae6fd, #99f6e4) !important;
}
.vb-accordion-thirteen-agents i:nth-child(2) {
background: linear-gradient(135deg, #fde68a, #fbcfe8) !important;
}
.vb-accordion-thirteen-agents i:nth-child(3) {
background: linear-gradient(135deg, #c4b5fd, #a7f3d0) !important;
}
.vb-accordion-thirteen-agents em {
margin-left: 20px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-style: normal;
font-weight: 900;
}
.vb-accordion-thirteen-main {
align-self: center;
}
.vb-accordion-thirteen-heading {
margin-bottom: 22px;
}
.vb-accordion-thirteen-heading h3 {
margin: 0 0 12px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(36px, 5vw, 64px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-thirteen-heading p {
max-width: 620px;
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-thirteen-list {
display: grid;
gap: 12px;
}
.vb-accordion-thirteen-item {
overflow: hidden;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
}
.vb-accordion-thirteen-item.is-open {
border-color: rgba(14, 165, 233, 0.34);
box-shadow: 0 22px 60px rgba(14, 165, 233, 0.12);
}
.vb-accordion-thirteen-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 78px;
padding: 18px 20px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.vb-accordion-thirteen-trigger small {
display: inline-flex;
margin-bottom: 7px;
padding: 5px 9px;
border-radius: 999px;
background: #ecfeff;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 11px;
line-height: 1;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-accordion-thirteen-trigger strong {
display: block;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 19px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-thirteen-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
background: #f0f9ff;
border: 1px solid rgba(14, 165, 233, 0.18);
}
.vb-accordion-thirteen-trigger em::before,
.vb-accordion-thirteen-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #0284c7;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-thirteen-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-thirteen-item.is-open .vb-accordion-thirteen-trigger em {
background: linear-gradient(135deg, #0ea5e9, #10b981) !important;
}
.vb-accordion-thirteen-item.is-open .vb-accordion-thirteen-trigger em::before,
.vb-accordion-thirteen-item.is-open .vb-accordion-thirteen-trigger em::after {
background: #ffffff;
}
.vb-accordion-thirteen-item.is-open .vb-accordion-thirteen-trigger em::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.vb-accordion-thirteen-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-thirteen-content {
padding: 0 20px 20px;
}
.vb-accordion-thirteen-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 900px) {
.vb-accordion-thirteen-help {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-thirteen-demo {
padding: 18px;
border-radius: 24px;
}
.vb-accordion-thirteen-card {
padding: 22px;
}
.vb-accordion-thirteen-heading h3 {
font-size: 38px !important;
}
}
This support center accordion is useful for help desks, SaaS support pages, ecommerce support sections, customer service FAQs, plugin support pages, and onboarding help sections.
14. Horizontal Feature Accordion
A horizontal feature accordion is useful for landing pages, SaaS feature sections, app showcases, product explainers, and homepage sections where several feature cards need to share one visual row.
This example uses a horizontal card row on desktop and turns into stacked cards on mobile. The active card expands visually, while the JavaScript switches the selected feature and updates ARIA states without using external libraries.
- Horizontal feature accordion layout
- Active card expands on desktop
- One-active-card behavior
- Responsive stacked mobile layout
- Useful for features, services, and product highlights
Example 14
Horizontal Feature Accordion
Click a feature card to expand it and highlight the selected value proposition.
Launch a clean accordion interface quickly with scoped JavaScript, simple HTML, and responsive CSS.
View exampleUse unique class names and scoped selectors so multiple accordions can exist on the same page.
View exampleThe horizontal desktop layout changes into a readable stacked layout on smaller screens.
View exampleActive styling, expanded content, and ARIA attributes help users understand which feature is selected.
View exampleJavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-fourteen]");
if (!accordion) return;
const cards = Array.from(accordion.querySelectorAll(".vb-accordion-fourteen-card"));
function activateCard(selectedCard) {
cards.forEach(function (card) {
const button = card.querySelector(".vb-accordion-fourteen-trigger");
const isSelected = card === selectedCard;
card.classList.toggle("is-open", isSelected);
button.setAttribute("aria-expanded", isSelected ? "true" : "false");
});
}
cards.forEach(function (card) {
const button = card.querySelector(".vb-accordion-fourteen-trigger");
button.addEventListener("click", function () {
activateCard(card);
});
});
const defaultCard = accordion.querySelector(".vb-accordion-fourteen-card.is-open") || cards[0];
if (defaultCard) {
activateCard(defaultCard);
}
})();
HTML
<div class="vb-accordion-fourteen-demo">
<div class="vb-accordion-fourteen-shell" data-vb-accordion-fourteen>
<div class="vb-accordion-fourteen-header">
<span>Example 14</span>
<h3>Horizontal Feature Accordion</h3>
<p>Click a feature card to expand it and highlight the selected value proposition.</p>
</div>
<div class="vb-accordion-fourteen-row">
<article class="vb-accordion-fourteen-card is-open">
<button class="vb-accordion-fourteen-trigger" type="button" aria-expanded="true">
<span>01</span>
<strong>Fast setup</strong>
</button>
<div class="vb-accordion-fourteen-panel">
<p>Launch a clean accordion interface quickly with scoped JavaScript, simple HTML, and responsive CSS.</p>
<a href="#javascript-accordion-examples">View example</a>
</div>
</article>
<article class="vb-accordion-fourteen-card">
<button class="vb-accordion-fourteen-trigger" type="button" aria-expanded="false">
<span>02</span>
<strong>Reusable code</strong>
</button>
<div class="vb-accordion-fourteen-panel">
<p>Use unique class names and scoped selectors so multiple accordions can exist on the same page.</p>
<a href="#javascript-accordion-examples">View example</a>
</div>
</article>
<article class="vb-accordion-fourteen-card">
<button class="vb-accordion-fourteen-trigger" type="button" aria-expanded="false">
<span>03</span>
<strong>Responsive UI</strong>
</button>
<div class="vb-accordion-fourteen-panel">
<p>The horizontal desktop layout changes into a readable stacked layout on smaller screens.</p>
<a href="#javascript-accordion-examples">View example</a>
</div>
</article>
<article class="vb-accordion-fourteen-card">
<button class="vb-accordion-fourteen-trigger" type="button" aria-expanded="false">
<span>04</span>
<strong>Clear states</strong>
</button>
<div class="vb-accordion-fourteen-panel">
<p>Active styling, expanded content, and ARIA attributes help users understand which feature is selected.</p>
<a href="#javascript-accordion-examples">View example</a>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-fourteen-demo,
.vb-accordion-fourteen-demo * {
box-sizing: border-box;
}
.vb-accordion-fourteen-demo {
margin: 28px 0;
padding: 36px;
border-radius: 14px 54px 54px 14px;
background:
radial-gradient(circle at 16% 18%, rgba(59, 130, 246, 0.18), transparent 34%),
radial-gradient(circle at 88% 20%, rgba(16, 185, 129, 0.16), transparent 34%),
linear-gradient(135deg, #eff6ff 0%, #ecfdf5 52%, #ffffff 100%) !important;
border: 1px solid rgba(96, 165, 250, 0.30);
box-shadow: 0 24px 70px rgba(30, 64, 175, 0.10);
}
.vb-accordion-fourteen-shell {
max-width: 1140px;
margin: 0 auto;
}
.vb-accordion-fourteen-header {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.68fr);
gap: 26px;
align-items: end;
margin-bottom: 28px;
}
.vb-accordion-fourteen-header span {
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: #1d4ed8;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-fourteen-header h3 {
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(36px, 5vw, 70px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-fourteen-header p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-fourteen-row {
display: flex;
gap: 14px;
min-height: 430px;
}
.vb-accordion-fourteen-card {
position: relative;
flex: 0.72;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
padding: 20px;
border-radius: 32px;
background:
linear-gradient(135deg, #ffffff, #f8fafc) !important;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
transition: flex 0.32s ease, background 0.24s ease, transform 0.24s ease, border-color 0.24s ease;
}
.vb-accordion-fourteen-card::after {
content: "";
position: absolute;
right: -60px;
bottom: -60px;
width: 180px;
height: 180px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
transition: background 0.24s ease;
}
.vb-accordion-fourteen-card.is-open {
flex: 1.85;
transform: translateY(-8px);
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.24), transparent 34%),
linear-gradient(135deg, #1d4ed8, #0891b2 58%, #059669) !important;
border-color: rgba(37, 99, 235, 0.38);
box-shadow: 0 28px 80px rgba(37, 99, 235, 0.18);
}
.vb-accordion-fourteen-card.is-open::after {
background: rgba(255,255,255,0.14);
}
.vb-accordion-fourteen-trigger {
position: relative;
z-index: 2;
display: grid;
gap: 18px;
width: 100%;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-fourteen-trigger span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px;
background: #eff6ff;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 14px;
font-weight: 950;
}
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-trigger span {
background: rgba(255,255,255,0.16);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.20);
}
.vb-accordion-fourteen-trigger strong {
display: block;
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 26px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.06em;
transition: writing-mode 0.1s ease, transform 0.1s ease, color 0.2s ease;
}
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-trigger strong {
writing-mode: horizontal-tb;
transform: rotate(0deg);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 4vw, 56px);
line-height: 0.95;
}
.vb-accordion-fourteen-panel {
position: relative;
z-index: 2;
display: none;
max-width: 500px;
}
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-panel {
display: block;
}
.vb-accordion-fourteen-panel p {
margin: 0 0 18px !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-fourteen-panel a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 16px;
border-radius: 999px;
background: #ffffff;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 13px;
font-weight: 950;
text-decoration: none !important;
}
@media (max-width: 900px) {
.vb-accordion-fourteen-header {
grid-template-columns: 1fr;
}
.vb-accordion-fourteen-row {
flex-direction: column;
min-height: auto;
}
.vb-accordion-fourteen-card,
.vb-accordion-fourteen-card.is-open {
flex: none;
transform: none;
}
.vb-accordion-fourteen-trigger strong,
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-trigger strong {
writing-mode: horizontal-tb;
transform: none;
font-size: 28px;
}
.vb-accordion-fourteen-panel,
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-panel {
display: block;
max-height: 0;
overflow: hidden;
}
.vb-accordion-fourteen-card.is-open .vb-accordion-fourteen-panel {
max-height: 220px;
}
}
@media (max-width: 640px) {
.vb-accordion-fourteen-demo {
padding: 18px;
border-radius: 14px 34px 34px 14px;
}
.vb-accordion-fourteen-header h3 {
font-size: 38px !important;
}
.vb-accordion-fourteen-card {
padding: 18px;
border-radius: 24px;
}
}
This horizontal feature accordion is useful for SaaS feature sections, homepage highlights, product explainers, startup landing pages, service previews, app features, and interactive marketing sections.
15. Nested Accordion Menu
A nested accordion menu is useful when content has more than one level, such as documentation categories, dashboard navigation, mobile menus, product filters, learning modules, and help center topics.
This example uses a two-level accordion structure with parent sections and child panels. The design uses a compact navigation layout, nested indentation, soft shadows, and separate JavaScript logic for parent and child accordion items.
- Two-level nested accordion structure
- Parent and child toggle behavior
- Compact navigation-style design
- Indented child panels
- Useful for docs, menus, filters, and learning platforms
Example 15
Nested Accordion Menu
Open parent categories and reveal nested child accordions inside each section.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-fifteen]");
if (!accordion) return;
const parents = Array.from(accordion.querySelectorAll(".vb-accordion-fifteen-parent"));
const children = Array.from(accordion.querySelectorAll(".vb-accordion-fifteen-child"));
function updateChild(child) {
const button = child.querySelector(".vb-accordion-fifteen-child-trigger");
const panel = child.querySelector(".vb-accordion-fifteen-child-panel");
const isOpen = child.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
function updateParent(parent) {
const button = parent.querySelector(".vb-accordion-fifteen-parent-trigger");
const panel = parent.querySelector(".vb-accordion-fifteen-parent-panel");
const isOpen = parent.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
if (isOpen) {
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
panel.style.maxHeight = "0px";
}
}
children.forEach(function (child) {
const button = child.querySelector(".vb-accordion-fifteen-child-trigger");
button.addEventListener("click", function () {
const parent = child.closest(".vb-accordion-fifteen-parent");
child.classList.toggle("is-open");
updateChild(child);
updateParent(parent);
});
updateChild(child);
});
parents.forEach(function (parent) {
const button = parent.querySelector(".vb-accordion-fifteen-parent-trigger");
button.addEventListener("click", function () {
parent.classList.toggle("is-open");
updateParent(parent);
});
updateParent(parent);
});
window.addEventListener("resize", function () {
children.forEach(updateChild);
parents.forEach(updateParent);
});
})();
HTML
<div class="vb-accordion-fifteen-demo">
<div class="vb-accordion-fifteen-shell" data-vb-accordion-fifteen>
<div class="vb-accordion-fifteen-header">
<span>Example 15</span>
<h3>Nested Accordion Menu</h3>
<p>Open parent categories and reveal nested child accordions inside each section.</p>
</div>
<div class="vb-accordion-fifteen-menu">
<section class="vb-accordion-fifteen-parent is-open">
<button class="vb-accordion-fifteen-parent-trigger" type="button" aria-expanded="true">
<span>01</span>
<strong>Website Components</strong>
<em></em>
</button>
<div class="vb-accordion-fifteen-parent-panel">
<div class="vb-accordion-fifteen-child-list">
<div class="vb-accordion-fifteen-child is-open">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="true">
<span>Hero sections</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>Hero sections introduce the page with a strong title, supporting text, visuals, and calls to action.</p>
</div>
</div>
<div class="vb-accordion-fifteen-child">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="false">
<span>Pricing tables</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>Pricing tables compare plans, features, monthly cost, yearly discounts, and purchase options.</p>
</div>
</div>
</div>
</div>
</section>
<section class="vb-accordion-fifteen-parent">
<button class="vb-accordion-fifteen-parent-trigger" type="button" aria-expanded="false">
<span>02</span>
<strong>JavaScript UI</strong>
<em></em>
</button>
<div class="vb-accordion-fifteen-parent-panel">
<div class="vb-accordion-fifteen-child-list">
<div class="vb-accordion-fifteen-child">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="false">
<span>Modals</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>Modals display focused overlays for login forms, alerts, product previews, and confirmation dialogs.</p>
</div>
</div>
<div class="vb-accordion-fifteen-child">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="false">
<span>Search filters</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>Search filters help users narrow cards, tables, products, directories, and content lists instantly.</p>
</div>
</div>
</div>
</div>
</section>
<section class="vb-accordion-fifteen-parent">
<button class="vb-accordion-fifteen-parent-trigger" type="button" aria-expanded="false">
<span>03</span>
<strong>Content Sections</strong>
<em></em>
</button>
<div class="vb-accordion-fifteen-parent-panel">
<div class="vb-accordion-fifteen-child-list">
<div class="vb-accordion-fifteen-child">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="false">
<span>FAQ blocks</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>FAQ blocks answer common visitor questions and can support SEO when structured clearly.</p>
</div>
</div>
<div class="vb-accordion-fifteen-child">
<button class="vb-accordion-fifteen-child-trigger" type="button" aria-expanded="false">
<span>Testimonials</span>
<strong>+</strong>
</button>
<div class="vb-accordion-fifteen-child-panel">
<p>Testimonials add trust by showing customer reviews, quotes, ratings, and social proof.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-fifteen-demo,
.vb-accordion-fifteen-demo * {
box-sizing: border-box;
}
.vb-accordion-fifteen-demo {
margin: 28px 0;
padding: 36px;
border-radius: 12px 12px 48px 48px;
background:
linear-gradient(135deg, #f8fafc 0%, #f5f3ff 48%, #ffffff 100%) !important;
border: 1px solid rgba(139, 92, 246, 0.22);
box-shadow: 0 24px 70px rgba(88, 28, 135, 0.10);
}
.vb-accordion-fifteen-shell {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
gap: 28px;
align-items: start;
}
.vb-accordion-fifteen-header {
position: sticky;
top: 24px;
padding: 26px;
border-radius: 34px 34px 8px 34px;
background:
radial-gradient(circle at 20% 18%, rgba(255,255,255,0.24), transparent 34%),
linear-gradient(135deg, #4c1d95, #7c3aed 58%, #06b6d4) !important;
box-shadow: 0 28px 80px rgba(109, 40, 217, 0.22);
}
.vb-accordion-fifteen-header span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.20);
color: #ede9fe !important;
-webkit-text-fill-color: #ede9fe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-fifteen-header h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(36px, 5vw, 60px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-fifteen-header p {
margin: 0 !important;
color: #e0e7ff !important;
-webkit-text-fill-color: #e0e7ff !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-fifteen-menu {
display: grid;
gap: 14px;
}
.vb-accordion-fifteen-parent {
overflow: hidden;
border-radius: 28px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.vb-accordion-fifteen-parent.is-open {
border-color: rgba(124, 58, 237, 0.34);
box-shadow: 0 24px 64px rgba(124, 58, 237, 0.12);
}
.vb-accordion-fifteen-parent-trigger {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 82px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-fifteen-parent-trigger > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px 18px 4px 18px;
background: #ede9fe;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
font-size: 14px;
font-weight: 950;
}
.vb-accordion-fifteen-parent-trigger strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 21px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-fifteen-parent-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 16px;
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.22);
}
.vb-accordion-fifteen-parent-trigger em::before,
.vb-accordion-fifteen-parent-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #6d28d9;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-fifteen-parent-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-fifteen-parent.is-open .vb-accordion-fifteen-parent-trigger em {
background: #6d28d9;
}
.vb-accordion-fifteen-parent.is-open .vb-accordion-fifteen-parent-trigger em::before,
.vb-accordion-fifteen-parent.is-open .vb-accordion-fifteen-parent-trigger em::after {
background: #ffffff;
}
.vb-accordion-fifteen-parent.is-open .vb-accordion-fifteen-parent-trigger em::after {
opacity: 0;
}
.vb-accordion-fifteen-parent-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.vb-accordion-fifteen-child-list {
display: grid;
gap: 10px;
padding: 0 20px 20px 90px;
}
.vb-accordion-fifteen-child {
overflow: hidden;
border-radius: 18px 18px 18px 4px;
background: #f8fafc;
border: 1px solid rgba(226, 232, 240, 0.9);
}
.vb-accordion-fifteen-child-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 13px 14px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-fifteen-child-trigger span {
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
line-height: 1.25;
font-weight: 900;
}
.vb-accordion-fifteen-child-trigger strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 12px;
background: #ffffff;
color: #7c3aed !important;
-webkit-text-fill-color: #7c3aed !important;
font-size: 20px;
font-weight: 950;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-fifteen-child.is-open .vb-accordion-fifteen-child-trigger strong {
transform: rotate(45deg);
background: #7c3aed;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-fifteen-child-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-fifteen-child-panel p {
margin: 0 !important;
padding: 0 14px 14px;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 14px;
line-height: 1.65;
font-weight: 650;
}
@media (max-width: 900px) {
.vb-accordion-fifteen-shell {
grid-template-columns: 1fr;
}
.vb-accordion-fifteen-header {
position: static;
}
}
@media (max-width: 640px) {
.vb-accordion-fifteen-demo {
padding: 18px;
border-radius: 10px 10px 34px 34px;
}
.vb-accordion-fifteen-header {
padding: 22px;
}
.vb-accordion-fifteen-header h3 {
font-size: 38px !important;
}
.vb-accordion-fifteen-parent-trigger {
grid-template-columns: 46px minmax(0, 1fr) 38px;
gap: 12px;
padding: 16px;
}
.vb-accordion-fifteen-parent-trigger > span {
width: 46px;
height: 46px;
}
.vb-accordion-fifteen-child-list {
padding: 0 16px 16px 62px;
}
}
This nested accordion menu is useful for documentation navigation, mobile menus, product filters, course modules, dashboard sidebars, help centers, and any content structure that needs expandable parent and child levels.
16. Searchable FAQ Accordion
A searchable FAQ accordion combines live search filtering with expandable JavaScript FAQ panels. It is useful for support pages, help centers, product FAQs, documentation pages, and long FAQ sections where users need to find answers quickly.
This example uses a search input, result count, no-results message, and accordion behavior. The layout has a clean support-search design, and the JavaScript filters FAQ items while still allowing users to expand matching answers.
- FAQ search input
- Live filtering by question and answer text
- Result count and empty state
- One-open-at-a-time accordion behavior
- Useful for large FAQ and help sections
Example 16
Searchable FAQ Accordion
Search questions and open matching answers inside one reusable JavaScript component.
You can download invoices from your account billing page. Each completed payment should include invoice date, plan name, and receipt details.
Use the password reset link on the login screen, enter your email address, and follow the secure reset link sent to your inbox.
Updates are usually available through the account dashboard, product downloads area, email notifications, or the product changelog page.
Open a support ticket with your account email, describe the problem clearly, and include screenshots or error messages when possible.
Yes, if your license allows client work. Always check the product license terms before using templates or components in commercial projects.
No matching questions found.
Try another keyword such as billing, password, updates, support, or license.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-sixteen]");
if (!accordion) return;
const input = accordion.querySelector("[data-vb-accordion-sixteen-search]");
const clearButton = accordion.querySelector("[data-vb-accordion-sixteen-clear]");
const count = accordion.querySelector("[data-vb-accordion-sixteen-count]");
const empty = accordion.querySelector("[data-vb-accordion-sixteen-empty]");
const items = Array.from(accordion.querySelectorAll(".vb-accordion-sixteen-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-sixteen-trigger");
const panel = item.querySelector(".vb-accordion-sixteen-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-sixteen-trigger");
const panel = item.querySelector(".vb-accordion-sixteen-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
function updateSearch() {
const query = input.value.trim().toLowerCase();
let visibleCount = 0;
items.forEach(function (item) {
const question = item.querySelector(".vb-accordion-sixteen-trigger span").textContent.toLowerCase();
const answer = item.querySelector(".vb-accordion-sixteen-content p").textContent.toLowerCase();
const keywords = item.getAttribute("data-faq-text").toLowerCase();
const match = question.includes(query) || answer.includes(query) || keywords.includes(query);
item.classList.toggle("is-hidden", !match);
if (match) {
visibleCount += 1;
} else {
closeItem(item);
}
});
count.textContent = visibleCount === 1 ? "1 question found" : visibleCount + " questions found";
empty.classList.toggle("is-visible", visibleCount === 0);
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-sixteen-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
input.addEventListener("input", updateSearch);
clearButton.addEventListener("click", function () {
input.value = "";
input.focus();
updateSearch();
});
const defaultItem = accordion.querySelector(".vb-accordion-sixteen-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
updateSearch();
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-sixteen-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-sixteen-demo">
<div class="vb-accordion-sixteen-shell" data-vb-accordion-sixteen>
<div class="vb-accordion-sixteen-hero">
<span>Example 16</span>
<h3>Searchable FAQ Accordion</h3>
<p>Search questions and open matching answers inside one reusable JavaScript component.</p>
<div class="vb-accordion-sixteen-search">
<label for="vb-accordion-sixteen-input">Search FAQ</label>
<input id="vb-accordion-sixteen-input" type="search" placeholder="Try billing, password, updates, support..." data-vb-accordion-sixteen-search>
</div>
</div>
<div class="vb-accordion-sixteen-meta">
<strong data-vb-accordion-sixteen-count>5 questions found</strong>
<button type="button" data-vb-accordion-sixteen-clear>Clear search</button>
</div>
<div class="vb-accordion-sixteen-list">
<section class="vb-accordion-sixteen-item is-open" data-faq-text="billing invoice payment receipt subscription plan">
<button class="vb-accordion-sixteen-trigger" type="button" aria-expanded="true">
<span>How can I download my invoice?</span>
<em></em>
</button>
<div class="vb-accordion-sixteen-panel">
<div class="vb-accordion-sixteen-content">
<p>You can download invoices from your account billing page. Each completed payment should include invoice date, plan name, and receipt details.</p>
</div>
</div>
</section>
<section class="vb-accordion-sixteen-item" data-faq-text="password reset login account email security">
<button class="vb-accordion-sixteen-trigger" type="button" aria-expanded="false">
<span>How do I reset my password?</span>
<em></em>
</button>
<div class="vb-accordion-sixteen-panel">
<div class="vb-accordion-sixteen-content">
<p>Use the password reset link on the login screen, enter your email address, and follow the secure reset link sent to your inbox.</p>
</div>
</div>
</section>
<section class="vb-accordion-sixteen-item" data-faq-text="updates product download new version changelog release">
<button class="vb-accordion-sixteen-trigger" type="button" aria-expanded="false">
<span>Where do I get product updates?</span>
<em></em>
</button>
<div class="vb-accordion-sixteen-panel">
<div class="vb-accordion-sixteen-content">
<p>Updates are usually available through the account dashboard, product downloads area, email notifications, or the product changelog page.</p>
</div>
</div>
</section>
<section class="vb-accordion-sixteen-item" data-faq-text="support help contact ticket issue bug problem">
<button class="vb-accordion-sixteen-trigger" type="button" aria-expanded="false">
<span>How do I contact support?</span>
<em></em>
</button>
<div class="vb-accordion-sixteen-panel">
<div class="vb-accordion-sixteen-content">
<p>Open a support ticket with your account email, describe the problem clearly, and include screenshots or error messages when possible.</p>
</div>
</div>
</section>
<section class="vb-accordion-sixteen-item" data-faq-text="license activation domain website client projects">
<button class="vb-accordion-sixteen-trigger" type="button" aria-expanded="false">
<span>Can I use it on client projects?</span>
<em></em>
</button>
<div class="vb-accordion-sixteen-panel">
<div class="vb-accordion-sixteen-content">
<p>Yes, if your license allows client work. Always check the product license terms before using templates or components in commercial projects.</p>
</div>
</div>
</section>
</div>
<div class="vb-accordion-sixteen-empty" data-vb-accordion-sixteen-empty>
<strong>No matching questions found.</strong>
<p>Try another keyword such as billing, password, updates, support, or license.</p>
</div>
</div>
</div>
CSS
.vb-accordion-sixteen-demo,
.vb-accordion-sixteen-demo * {
box-sizing: border-box;
}
.vb-accordion-sixteen-demo {
margin: 28px 0;
padding: 36px;
border-radius: 34px;
background:
radial-gradient(circle at 14% 20%, rgba(6, 182, 212, 0.18), transparent 34%),
radial-gradient(circle at 86% 16%, rgba(59, 130, 246, 0.16), transparent 34%),
linear-gradient(135deg, #ecfeff 0%, #eff6ff 52%, #ffffff 100%) !important;
border: 1px solid rgba(103, 232, 249, 0.36);
box-shadow: 0 24px 70px rgba(8, 47, 73, 0.10);
}
.vb-accordion-sixteen-shell {
max-width: 980px;
margin: 0 auto;
}
.vb-accordion-sixteen-hero {
padding: 30px;
border-radius: 34px 34px 12px 34px;
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,0.24), transparent 34%),
linear-gradient(135deg, #0e7490, #2563eb) !important;
box-shadow: 0 28px 80px rgba(37, 99, 235, 0.18);
margin-bottom: 16px;
}
.vb-accordion-sixteen-hero > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-sixteen-hero h3 {
max-width: 720px;
margin: 0 0 12px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 70px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-sixteen-hero p {
max-width: 640px;
margin: 0 0 24px !important;
color: #dbeafe !important;
-webkit-text-fill-color: #dbeafe !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-sixteen-search {
display: grid;
gap: 9px;
}
.vb-accordion-sixteen-search label {
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-sixteen-search input {
width: 100%;
min-height: 62px;
padding: 0 18px;
border: 1px solid rgba(255,255,255,0.24);
border-radius: 20px;
outline: 0;
background: rgba(255,255,255,0.14);
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 16px;
font-weight: 800;
}
.vb-accordion-sixteen-search input::placeholder {
color: rgba(255,255,255,0.66);
-webkit-text-fill-color: rgba(255,255,255,0.66);
}
.vb-accordion-sixteen-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 14px;
padding: 12px 4px;
}
.vb-accordion-sixteen-meta strong {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 15px;
font-weight: 950;
}
.vb-accordion-sixteen-meta button {
min-height: 40px;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: #e0f2fe;
color: #0369a1 !important;
-webkit-text-fill-color: #0369a1 !important;
font-size: 13px;
font-weight: 950;
cursor: pointer;
}
.vb-accordion-sixteen-list {
display: grid;
gap: 12px;
}
.vb-accordion-sixteen-item {
overflow: hidden;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
}
.vb-accordion-sixteen-item.is-hidden {
display: none;
}
.vb-accordion-sixteen-item.is-open {
border-color: rgba(37, 99, 235, 0.34);
box-shadow: 0 22px 62px rgba(37, 99, 235, 0.12);
}
.vb-accordion-sixteen-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 72px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-sixteen-trigger span {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 18px;
line-height: 1.25;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-sixteen-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 16px;
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.16);
}
.vb-accordion-sixteen-trigger em::before,
.vb-accordion-sixteen-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #2563eb;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-sixteen-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-sixteen-item.is-open .vb-accordion-sixteen-trigger em {
background: #2563eb;
}
.vb-accordion-sixteen-item.is-open .vb-accordion-sixteen-trigger em::before,
.vb-accordion-sixteen-item.is-open .vb-accordion-sixteen-trigger em::after {
background: #ffffff;
}
.vb-accordion-sixteen-item.is-open .vb-accordion-sixteen-trigger em::after {
opacity: 0;
}
.vb-accordion-sixteen-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-sixteen-content {
padding: 0 20px 20px;
}
.vb-accordion-sixteen-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-sixteen-empty {
display: none;
margin-top: 14px;
padding: 22px;
border-radius: 22px;
background: #fff7ed;
border: 1px solid rgba(251, 146, 60, 0.28);
}
.vb-accordion-sixteen-empty.is-visible {
display: block;
}
.vb-accordion-sixteen-empty strong {
display: block;
margin-bottom: 7px;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 18px;
font-weight: 950;
}
.vb-accordion-sixteen-empty p {
margin: 0 !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 15px;
line-height: 1.65;
font-weight: 650;
}
@media (max-width: 640px) {
.vb-accordion-sixteen-demo {
padding: 18px;
border-radius: 24px;
}
.vb-accordion-sixteen-hero {
padding: 22px;
border-radius: 26px 26px 10px 26px;
}
.vb-accordion-sixteen-hero h3 {
font-size: 38px !important;
}
.vb-accordion-sixteen-meta {
align-items: stretch;
flex-direction: column;
}
}
This searchable FAQ accordion is ideal for large FAQ pages, support centers, documentation sections, product help pages, onboarding resources, and any long answer section where users need both search and expandable content.
17. Comparison Accordion
A comparison accordion is useful when visitors need to compare options, plans, services, product versions, features, or packages without reading a long comparison table on mobile.
This example uses a side-by-side comparison layout on desktop and a compact accordion structure on smaller screens. Each expandable row compares two options with clear labels, checkmarks, and a bold active state.
- Comparison-focused accordion layout
- One-open-at-a-time behavior
- Two-column feature comparison
- Checkmark and difference labels
- Useful for plans, services, and products
Example 17
Comparison Accordion
Compare two options inside expandable rows without showing a large table at once.
Starter
Professional
Starter
Basic components
Includes essential layouts, simple UI blocks, and standard support.
Professional
Advanced components
Includes advanced UI sections, reusable patterns, and premium layouts.
Starter
Limited styling
Good for simple websites that only need small color and spacing changes.
Professional
Full styling control
Better for agencies, custom client projects, dashboards, and advanced landing pages.
Starter
Small websites
Useful for portfolios, simple blogs, small business pages, and basic landing pages.
Professional
Client projects
Useful for SaaS websites, ecommerce pages, agency work, and reusable UI systems.
Starter
Email support
Basic support for setup questions, simple issues, and general usage help.
Professional
Priority support
Faster help for implementation questions, advanced layouts, and project-specific problems.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-seventeen]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-seventeen-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-seventeen-trigger");
const panel = item.querySelector(".vb-accordion-seventeen-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-seventeen-trigger");
const panel = item.querySelector(".vb-accordion-seventeen-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-seventeen-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-seventeen-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-seventeen-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-seventeen-demo">
<div class="vb-accordion-seventeen-shell" data-vb-accordion-seventeen>
<div class="vb-accordion-seventeen-header">
<span>Example 17</span>
<h3>Comparison Accordion</h3>
<p>Compare two options inside expandable rows without showing a large table at once.</p>
</div>
<div class="vb-accordion-seventeen-board">
<div class="vb-accordion-seventeen-labels">
<strong>Starter</strong>
<strong>Professional</strong>
</div>
<section class="vb-accordion-seventeen-item is-open">
<button class="vb-accordion-seventeen-trigger" type="button" aria-expanded="true">
<span>Feature access</span>
<em></em>
</button>
<div class="vb-accordion-seventeen-panel">
<div class="vb-accordion-seventeen-content">
<div>
<small>Starter</small>
<strong>Basic components</strong>
<p>Includes essential layouts, simple UI blocks, and standard support.</p>
</div>
<div>
<small>Professional</small>
<strong>Advanced components</strong>
<p>Includes advanced UI sections, reusable patterns, and premium layouts.</p>
</div>
</div>
</div>
</section>
<section class="vb-accordion-seventeen-item">
<button class="vb-accordion-seventeen-trigger" type="button" aria-expanded="false">
<span>Customization options</span>
<em></em>
</button>
<div class="vb-accordion-seventeen-panel">
<div class="vb-accordion-seventeen-content">
<div>
<small>Starter</small>
<strong>Limited styling</strong>
<p>Good for simple websites that only need small color and spacing changes.</p>
</div>
<div>
<small>Professional</small>
<strong>Full styling control</strong>
<p>Better for agencies, custom client projects, dashboards, and advanced landing pages.</p>
</div>
</div>
</div>
</section>
<section class="vb-accordion-seventeen-item">
<button class="vb-accordion-seventeen-trigger" type="button" aria-expanded="false">
<span>Best use case</span>
<em></em>
</button>
<div class="vb-accordion-seventeen-panel">
<div class="vb-accordion-seventeen-content">
<div>
<small>Starter</small>
<strong>Small websites</strong>
<p>Useful for portfolios, simple blogs, small business pages, and basic landing pages.</p>
</div>
<div>
<small>Professional</small>
<strong>Client projects</strong>
<p>Useful for SaaS websites, ecommerce pages, agency work, and reusable UI systems.</p>
</div>
</div>
</div>
</section>
<section class="vb-accordion-seventeen-item">
<button class="vb-accordion-seventeen-trigger" type="button" aria-expanded="false">
<span>Support level</span>
<em></em>
</button>
<div class="vb-accordion-seventeen-panel">
<div class="vb-accordion-seventeen-content">
<div>
<small>Starter</small>
<strong>Email support</strong>
<p>Basic support for setup questions, simple issues, and general usage help.</p>
</div>
<div>
<small>Professional</small>
<strong>Priority support</strong>
<p>Faster help for implementation questions, advanced layouts, and project-specific problems.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-seventeen-demo,
.vb-accordion-seventeen-demo * {
box-sizing: border-box;
}
.vb-accordion-seventeen-demo {
margin: 28px 0;
padding: 38px;
border-radius: 8px 48px 8px 48px;
background:
linear-gradient(135deg, #f8fafc 0%, #fefce8 48%, #ffffff 100%) !important;
border: 1px solid rgba(202, 138, 4, 0.22);
box-shadow: 0 24px 70px rgba(113, 63, 18, 0.10);
}
.vb-accordion-seventeen-shell {
max-width: 1100px;
margin: 0 auto;
}
.vb-accordion-seventeen-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
gap: 26px;
align-items: end;
margin-bottom: 28px;
}
.vb-accordion-seventeen-header span {
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
padding: 8px 12px;
border-radius: 0;
background: #854d0e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-seventeen-header h3 {
margin: 0 !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-seventeen-header p {
margin: 0 !important;
color: #57534e !important;
-webkit-text-fill-color: #57534e !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-seventeen-board {
padding: 18px;
border-radius: 28px 8px 28px 8px;
background: #ffffff;
border: 1px solid rgba(161, 98, 7, 0.18);
box-shadow: 0 20px 56px rgba(113, 63, 18, 0.08);
}
.vb-accordion-seventeen-labels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 12px;
padding-left: 18px;
padding-right: 18px;
}
.vb-accordion-seventeen-labels strong {
padding: 12px 16px;
border-radius: 16px 4px 16px 4px;
background: #fef3c7;
color: #854d0e !important;
-webkit-text-fill-color: #854d0e !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-accordion-seventeen-item {
overflow: hidden;
border-radius: 22px 6px 22px 6px;
border: 1px solid rgba(202, 138, 4, 0.20);
background: #ffffff;
margin-bottom: 12px;
}
.vb-accordion-seventeen-item:last-child {
margin-bottom: 0;
}
.vb-accordion-seventeen-item.is-open {
box-shadow: 0 20px 54px rgba(202, 138, 4, 0.12);
border-color: rgba(202, 138, 4, 0.36);
}
.vb-accordion-seventeen-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 72px;
padding: 18px 20px;
border: 0;
background: linear-gradient(135deg, #ffffff, #fffbeb) !important;
cursor: pointer;
text-align: left;
}
.vb-accordion-seventeen-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 20px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-seventeen-trigger em {
position: relative;
width: 44px;
height: 44px;
border-radius: 6px 18px 6px 18px;
background: #fef3c7;
border: 1px solid rgba(202, 138, 4, 0.22);
}
.vb-accordion-seventeen-trigger em::before,
.vb-accordion-seventeen-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
border-radius: 999px;
background: #a16207;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-seventeen-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-seventeen-item.is-open .vb-accordion-seventeen-trigger em {
background: #ca8a04;
}
.vb-accordion-seventeen-item.is-open .vb-accordion-seventeen-trigger em::before,
.vb-accordion-seventeen-item.is-open .vb-accordion-seventeen-trigger em::after {
background: #ffffff;
}
.vb-accordion-seventeen-item.is-open .vb-accordion-seventeen-trigger em::after {
opacity: 0;
}
.vb-accordion-seventeen-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-seventeen-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 0 18px 18px;
}
.vb-accordion-seventeen-content div {
padding: 18px;
border-radius: 18px 4px 18px 4px;
background: #f8fafc;
border: 1px solid rgba(226, 232, 240, 0.9);
}
.vb-accordion-seventeen-content div:last-child {
background: #fffbeb;
border-color: rgba(202, 138, 4, 0.22);
}
.vb-accordion-seventeen-content small {
display: inline-flex;
margin-bottom: 9px;
padding: 5px 8px;
border-radius: 999px;
background: #ffffff;
color: #854d0e !important;
-webkit-text-fill-color: #854d0e !important;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-accordion-seventeen-content strong {
display: block;
margin-bottom: 8px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
line-height: 1.2;
font-weight: 950;
}
.vb-accordion-seventeen-content p {
margin: 0 !important;
color: #57534e !important;
-webkit-text-fill-color: #57534e !important;
font-size: 14px;
line-height: 1.7;
font-weight: 650;
}
@media (max-width: 760px) {
.vb-accordion-seventeen-demo {
padding: 18px;
border-radius: 8px 32px 8px 32px;
}
.vb-accordion-seventeen-header {
grid-template-columns: 1fr;
}
.vb-accordion-seventeen-header h3 {
font-size: 40px !important;
}
.vb-accordion-seventeen-labels,
.vb-accordion-seventeen-content {
grid-template-columns: 1fr;
}
.vb-accordion-seventeen-labels {
display: none;
}
.vb-accordion-seventeen-board {
padding: 12px;
}
}
This comparison accordion is useful for pricing plans, service packages, product versions, feature comparisons, mobile comparison sections, and landing pages where users need structured differences without a large table.
18. Notification Accordion
A notification accordion is useful for dashboards, admin panels, account pages, app inboxes, update centers, CRM screens, and project management interfaces where messages need to expand into more detail.
This example uses an inbox-inspired accordion with unread indicators, message timestamps, priority badges, and multi-open behavior. It has a completely different visual feel from FAQ or content accordions because it is designed like a compact notification center.
- Notification center accordion layout
- Multi-open message behavior
- Unread dots and timestamps
- Priority and status badges
- Useful for dashboards, inboxes, and admin screens
Example 18
Notification Accordion
Expand notification rows to read more details without leaving the dashboard.
A new login was detected from a different browser. Review the session details and confirm that this activity belongs to you.
Review activityYour weekly performance report has been generated. Open the report to review traffic, conversions, engagement, and content changes.
Open reportA new version is available with security improvements, UI fixes, and compatibility updates. Back up your site before updating.
View changelogA new comment is waiting for review. Check the message, approve it, reply to the user, or move it to spam if needed.
Moderate commentJavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-eighteen]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-eighteen-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-eighteen-trigger");
const panel = item.querySelector(".vb-accordion-eighteen-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-eighteen-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
item.classList.remove("is-unread");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-eighteen-demo">
<div class="vb-accordion-eighteen-inbox" data-vb-accordion-eighteen>
<div class="vb-accordion-eighteen-top">
<div>
<span>Example 18</span>
<h3>Notification Accordion</h3>
</div>
<p>Expand notification rows to read more details without leaving the dashboard.</p>
</div>
<div class="vb-accordion-eighteen-toolbar">
<strong>Inbox updates</strong>
<button type="button">Mark all read</button>
</div>
<div class="vb-accordion-eighteen-list">
<article class="vb-accordion-eighteen-item is-open is-unread">
<button class="vb-accordion-eighteen-trigger" type="button" aria-expanded="true">
<i></i>
<span>
<strong>New account login detected</strong>
<small>Security · 2 minutes ago</small>
</span>
<em>High</em>
</button>
<div class="vb-accordion-eighteen-panel">
<div class="vb-accordion-eighteen-content">
<p>A new login was detected from a different browser. Review the session details and confirm that this activity belongs to you.</p>
<a href="#javascript-accordion-examples">Review activity</a>
</div>
</div>
</article>
<article class="vb-accordion-eighteen-item is-unread">
<button class="vb-accordion-eighteen-trigger" type="button" aria-expanded="false">
<i></i>
<span>
<strong>Weekly report is ready</strong>
<small>Analytics · 1 hour ago</small>
</span>
<em>Info</em>
</button>
<div class="vb-accordion-eighteen-panel">
<div class="vb-accordion-eighteen-content">
<p>Your weekly performance report has been generated. Open the report to review traffic, conversions, engagement, and content changes.</p>
<a href="#javascript-accordion-examples">Open report</a>
</div>
</div>
</article>
<article class="vb-accordion-eighteen-item">
<button class="vb-accordion-eighteen-trigger" type="button" aria-expanded="false">
<i></i>
<span>
<strong>Plugin update available</strong>
<small>System · Yesterday</small>
</span>
<em>Update</em>
</button>
<div class="vb-accordion-eighteen-panel">
<div class="vb-accordion-eighteen-content">
<p>A new version is available with security improvements, UI fixes, and compatibility updates. Back up your site before updating.</p>
<a href="#javascript-accordion-examples">View changelog</a>
</div>
</div>
</article>
<article class="vb-accordion-eighteen-item">
<button class="vb-accordion-eighteen-trigger" type="button" aria-expanded="false">
<i></i>
<span>
<strong>Comment needs approval</strong>
<small>Content · 2 days ago</small>
</span>
<em>Task</em>
</button>
<div class="vb-accordion-eighteen-panel">
<div class="vb-accordion-eighteen-content">
<p>A new comment is waiting for review. Check the message, approve it, reply to the user, or move it to spam if needed.</p>
<a href="#javascript-accordion-examples">Moderate comment</a>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-eighteen-demo,
.vb-accordion-eighteen-demo * {
box-sizing: border-box;
}
.vb-accordion-eighteen-demo {
margin: 28px 0;
padding: 36px;
border-radius: 38px;
background:
radial-gradient(circle at 16% 18%, rgba(248, 113, 113, 0.16), transparent 34%),
radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.16), transparent 34%),
linear-gradient(135deg, #f8fafc 0%, #fff1f2 50%, #eff6ff 100%) !important;
border: 1px solid rgba(248, 113, 113, 0.24);
box-shadow: 0 24px 70px rgba(127, 29, 29, 0.10);
}
.vb-accordion-eighteen-inbox {
max-width: 980px;
margin: 0 auto;
padding: 18px;
border-radius: 30px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
}
.vb-accordion-eighteen-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
gap: 24px;
align-items: end;
padding: 16px 16px 22px;
}
.vb-accordion-eighteen-top span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 12px;
background: #fee2e2;
color: #b91c1c !important;
-webkit-text-fill-color: #b91c1c !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-eighteen-top h3 {
margin: 0 !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(38px, 5vw, 68px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-eighteen-top p {
margin: 0 !important;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-eighteen-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
padding: 14px 16px;
border-radius: 20px;
background: #f8fafc;
}
.vb-accordion-eighteen-toolbar strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 15px;
font-weight: 950;
}
.vb-accordion-eighteen-toolbar button {
min-height: 38px;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
cursor: pointer;
}
.vb-accordion-eighteen-list {
display: grid;
gap: 10px;
}
.vb-accordion-eighteen-item {
overflow: hidden;
border-radius: 20px;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.9);
}
.vb-accordion-eighteen-item.is-unread {
border-color: rgba(248, 113, 113, 0.32);
background: linear-gradient(135deg, #ffffff, #fff7ed) !important;
}
.vb-accordion-eighteen-item.is-open {
box-shadow: 0 18px 52px rgba(127, 29, 29, 0.10);
}
.vb-accordion-eighteen-trigger {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 74px;
align-items: center;
gap: 14px;
width: 100%;
min-height: 76px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-eighteen-trigger i {
width: 11px;
height: 11px;
border-radius: 999px;
background: #cbd5e1;
}
.vb-accordion-eighteen-item.is-unread .vb-accordion-eighteen-trigger i {
background: #ef4444;
box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12);
}
.vb-accordion-eighteen-trigger strong {
display: block;
margin-bottom: 5px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 18px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.035em;
}
.vb-accordion-eighteen-trigger small {
display: block;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 750;
}
.vb-accordion-eighteen-trigger em {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
border-radius: 999px;
background: #f1f5f9;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 12px;
font-style: normal;
font-weight: 950;
}
.vb-accordion-eighteen-item.is-unread .vb-accordion-eighteen-trigger em {
background: #fee2e2;
color: #b91c1c !important;
-webkit-text-fill-color: #b91c1c !important;
}
.vb-accordion-eighteen-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-eighteen-content {
padding: 0 20px 20px 52px;
}
.vb-accordion-eighteen-content p {
max-width: 720px;
margin: 0 0 14px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-eighteen-content a {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
padding: 9px 14px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
font-size: 13px;
font-weight: 950;
text-decoration: none !important;
}
@media (max-width: 760px) {
.vb-accordion-eighteen-demo {
padding: 18px;
border-radius: 28px;
}
.vb-accordion-eighteen-inbox {
padding: 12px;
border-radius: 24px;
}
.vb-accordion-eighteen-top {
grid-template-columns: 1fr;
padding: 12px 10px 18px;
}
.vb-accordion-eighteen-top h3 {
font-size: 38px !important;
}
.vb-accordion-eighteen-toolbar {
flex-direction: column;
align-items: stretch;
}
.vb-accordion-eighteen-trigger {
grid-template-columns: 14px minmax(0, 1fr);
}
.vb-accordion-eighteen-trigger em {
grid-column: 2;
justify-self: start;
min-width: 74px;
}
.vb-accordion-eighteen-content {
padding: 0 18px 18px 46px;
}
}
This notification accordion is useful for dashboard inboxes, admin messages, CRM notifications, account activity logs, update centers, project management tools, and SaaS app interfaces.
19. Course Module Accordion
A course module accordion is useful for online course pages, learning platforms, coaching websites, workshop pages, lesson previews, and educational landing pages where lessons need to stay organized and easy to scan.
This example uses a learning-dashboard style with lesson progress, module numbers, duration labels, progress bars, and multi-open JavaScript behavior. It is visually different from standard FAQ accordions because it feels like a structured course curriculum preview.
- Course curriculum accordion layout
- Multi-open module behavior
- Lesson duration and progress indicators
- Learning platform visual style
- Useful for courses, workshops, and tutorials
Example 19
Course Module Accordion
Preview course lessons, module progress, and learning outcomes inside expandable curriculum cards.
Course progress
42% complete
- What an accordion component does
- Basic HTML structure
- Simple open and close states
- Click event listeners
- Dynamic max-height animation
- ARIA expanded state updates
- Mobile spacing and readable tap targets
- Content wrapping and compact layouts
- Better spacing for small screens
- Nested accordions
- Searchable FAQ sections
- Reusable multi-instance components
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-nineteen]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-nineteen-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-nineteen-trigger");
const panel = item.querySelector(".vb-accordion-nineteen-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-nineteen-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-nineteen-demo">
<div class="vb-accordion-nineteen-course" data-vb-accordion-nineteen>
<div class="vb-accordion-nineteen-hero">
<span>Example 19</span>
<h3>Course Module Accordion</h3>
<p>Preview course lessons, module progress, and learning outcomes inside expandable curriculum cards.</p>
<div class="vb-accordion-nineteen-progress">
<strong>Course progress</strong>
<div><i></i></div>
<small>42% complete</small>
</div>
</div>
<div class="vb-accordion-nineteen-list">
<section class="vb-accordion-nineteen-item is-open">
<button class="vb-accordion-nineteen-trigger" type="button" aria-expanded="true">
<span>01</span>
<strong>Accordion fundamentals</strong>
<small>4 lessons · 28 min</small>
<em></em>
</button>
<div class="vb-accordion-nineteen-panel">
<div class="vb-accordion-nineteen-content">
<ul>
<li>What an accordion component does</li>
<li>Basic HTML structure</li>
<li>Simple open and close states</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-nineteen-item">
<button class="vb-accordion-nineteen-trigger" type="button" aria-expanded="false">
<span>02</span>
<strong>JavaScript interaction</strong>
<small>5 lessons · 36 min</small>
<em></em>
</button>
<div class="vb-accordion-nineteen-panel">
<div class="vb-accordion-nineteen-content">
<ul>
<li>Click event listeners</li>
<li>Dynamic max-height animation</li>
<li>ARIA expanded state updates</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-nineteen-item">
<button class="vb-accordion-nineteen-trigger" type="button" aria-expanded="false">
<span>03</span>
<strong>Responsive styling</strong>
<small>3 lessons · 22 min</small>
<em></em>
</button>
<div class="vb-accordion-nineteen-panel">
<div class="vb-accordion-nineteen-content">
<ul>
<li>Mobile spacing and readable tap targets</li>
<li>Content wrapping and compact layouts</li>
<li>Better spacing for small screens</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-nineteen-item">
<button class="vb-accordion-nineteen-trigger" type="button" aria-expanded="false">
<span>04</span>
<strong>Advanced accordion patterns</strong>
<small>6 lessons · 48 min</small>
<em></em>
</button>
<div class="vb-accordion-nineteen-panel">
<div class="vb-accordion-nineteen-content">
<ul>
<li>Nested accordions</li>
<li>Searchable FAQ sections</li>
<li>Reusable multi-instance components</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-nineteen-demo,
.vb-accordion-nineteen-demo * {
box-sizing: border-box;
}
.vb-accordion-nineteen-demo {
margin: 28px 0;
padding: 38px;
border-radius: 42px 42px 14px 14px;
background:
radial-gradient(circle at 18% 20%, rgba(34, 197, 94, 0.16), transparent 34%),
radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 34%),
linear-gradient(135deg, #f0fdf4 0%, #ecfeff 50%, #ffffff 100%) !important;
border: 1px solid rgba(74, 222, 128, 0.28);
box-shadow: 0 24px 70px rgba(22, 101, 52, 0.10);
}
.vb-accordion-nineteen-course {
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-nineteen-hero {
padding: 30px;
border-radius: 34px 34px 8px 34px;
background:
radial-gradient(circle at 24% 16%, rgba(255,255,255,0.28), transparent 34%),
linear-gradient(135deg, #065f46, #0891b2) !important;
box-shadow: 0 28px 80px rgba(8, 145, 178, 0.22);
}
.vb-accordion-nineteen-hero > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.20);
color: #d1fae5 !important;
-webkit-text-fill-color: #d1fae5 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-nineteen-hero h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(38px, 5vw, 64px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-nineteen-hero p {
margin: 0 0 26px !important;
color: #ccfbf1 !important;
-webkit-text-fill-color: #ccfbf1 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-nineteen-progress {
padding: 18px;
border-radius: 22px;
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.18);
}
.vb-accordion-nineteen-progress strong {
display: block;
margin-bottom: 12px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px;
font-weight: 950;
}
.vb-accordion-nineteen-progress div {
overflow: hidden;
height: 12px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
margin-bottom: 10px;
}
.vb-accordion-nineteen-progress i {
display: block;
width: 42%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #bbf7d0, #67e8f9) !important;
}
.vb-accordion-nineteen-progress small {
color: #e0f2fe !important;
-webkit-text-fill-color: #e0f2fe !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-nineteen-list {
display: grid;
align-content: start;
gap: 14px;
}
.vb-accordion-nineteen-item {
overflow: hidden;
border-radius: 26px 26px 26px 8px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.vb-accordion-nineteen-item.is-open {
border-color: rgba(16, 185, 129, 0.38);
box-shadow: 0 24px 64px rgba(16, 185, 129, 0.13);
}
.vb-accordion-nineteen-trigger {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 120px 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 86px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-nineteen-trigger > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: #dcfce7;
color: #047857 !important;
-webkit-text-fill-color: #047857 !important;
font-size: 15px;
font-weight: 950;
}
.vb-accordion-nineteen-trigger strong {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 20px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-nineteen-trigger small {
justify-self: end;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-nineteen-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 14px;
background: #f0fdfa;
border: 1px solid rgba(20, 184, 166, 0.18);
}
.vb-accordion-nineteen-trigger em::before,
.vb-accordion-nineteen-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #0f766e;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-nineteen-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-nineteen-item.is-open .vb-accordion-nineteen-trigger em {
background: #0f766e;
}
.vb-accordion-nineteen-item.is-open .vb-accordion-nineteen-trigger em::before,
.vb-accordion-nineteen-item.is-open .vb-accordion-nineteen-trigger em::after {
background: #ffffff;
}
.vb-accordion-nineteen-item.is-open .vb-accordion-nineteen-trigger em::after {
opacity: 0;
}
.vb-accordion-nineteen-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-nineteen-content {
padding: 0 20px 20px 94px;
}
.vb-accordion-nineteen-content ul {
display: grid;
gap: 10px;
margin: 0 !important;
padding: 16px 18px !important;
border-radius: 18px;
background: #f8fafc;
list-style: none !important;
}
.vb-accordion-nineteen-content li {
position: relative;
margin: 0 !important;
padding-left: 24px;
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 14px;
line-height: 1.55;
font-weight: 800;
}
.vb-accordion-nineteen-content li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #059669;
-webkit-text-fill-color: #059669;
font-weight: 950;
}
@media (max-width: 900px) {
.vb-accordion-nineteen-course {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.vb-accordion-nineteen-demo {
padding: 18px;
border-radius: 28px 28px 10px 10px;
}
.vb-accordion-nineteen-hero {
padding: 22px;
}
.vb-accordion-nineteen-hero h3 {
font-size: 38px !important;
}
.vb-accordion-nineteen-trigger {
grid-template-columns: 48px minmax(0, 1fr) 38px;
gap: 12px;
padding: 16px;
}
.vb-accordion-nineteen-trigger > span {
width: 48px;
height: 48px;
}
.vb-accordion-nineteen-trigger small {
grid-column: 2;
justify-self: start;
}
.vb-accordion-nineteen-content {
padding: 0 16px 16px;
}
}
This course module accordion is useful for online courses, tutorial libraries, workshop landing pages, coaching programs, digital learning platforms, and educational websites that need structured lesson previews.
20. Restaurant Menu Accordion
A restaurant menu accordion is useful for restaurant websites, cafe pages, food delivery menus, catering services, recipe sections, and hospitality landing pages where food categories need to stay compact and easy to browse.
This example uses a warm restaurant-style layout with menu categories, price tags, decorative dividers, and one-open-at-a-time JavaScript behavior. The design is intentionally different from dashboard or SaaS accordions because it uses a hospitality-inspired visual style.
- Restaurant menu accordion layout
- One-open-at-a-time category behavior
- Food items with prices and descriptions
- Warm hospitality-inspired design
- Useful for restaurants, cafes, and catering websites
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twenty]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twenty-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-twenty-trigger");
const panel = item.querySelector(".vb-accordion-twenty-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-twenty-trigger");
const panel = item.querySelector(".vb-accordion-twenty-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twenty-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-twenty-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twenty-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-twenty-demo">
<div class="vb-accordion-twenty-menu" data-vb-accordion-twenty>
<div class="vb-accordion-twenty-cover">
<span>Example 20</span>
<h3>Restaurant Menu Accordion</h3>
<p>Browse menu categories and reveal dishes without overwhelming the page.</p>
<div class="vb-accordion-twenty-hours">
<strong>Open today</strong>
<small>12:00 - 22:00</small>
</div>
</div>
<div class="vb-accordion-twenty-board">
<section class="vb-accordion-twenty-item is-open">
<button class="vb-accordion-twenty-trigger" type="button" aria-expanded="true">
<span>Starters</span>
<small>4 dishes</small>
<em></em>
</button>
<div class="vb-accordion-twenty-panel">
<div class="vb-accordion-twenty-content">
<article>
<div>
<strong>Roasted tomato bruschetta</strong>
<p>Toasted sourdough, basil, garlic, olive oil, and slow-roasted tomatoes.</p>
</div>
<span>€8</span>
</article>
<article>
<div>
<strong>Crispy halloumi bites</strong>
<p>Golden halloumi, lemon yogurt, herbs, and chili honey.</p>
</div>
<span>€9</span>
</article>
</div>
</div>
</section>
<section class="vb-accordion-twenty-item">
<button class="vb-accordion-twenty-trigger" type="button" aria-expanded="false">
<span>Main courses</span>
<small>6 dishes</small>
<em></em>
</button>
<div class="vb-accordion-twenty-panel">
<div class="vb-accordion-twenty-content">
<article>
<div>
<strong>Herb grilled chicken</strong>
<p>Charred vegetables, garlic potatoes, lemon butter, and fresh herbs.</p>
</div>
<span>€18</span>
</article>
<article>
<div>
<strong>Mushroom truffle risotto</strong>
<p>Creamy arborio rice, parmesan, wild mushrooms, and truffle oil.</p>
</div>
<span>€17</span>
</article>
</div>
</div>
</section>
<section class="vb-accordion-twenty-item">
<button class="vb-accordion-twenty-trigger" type="button" aria-expanded="false">
<span>Desserts</span>
<small>3 dishes</small>
<em></em>
</button>
<div class="vb-accordion-twenty-panel">
<div class="vb-accordion-twenty-content">
<article>
<div>
<strong>Vanilla panna cotta</strong>
<p>Berry compote, mint, toasted almonds, and smooth vanilla cream.</p>
</div>
<span>€7</span>
</article>
<article>
<div>
<strong>Chocolate lava cake</strong>
<p>Warm chocolate cake, soft center, sea salt, and vanilla ice cream.</p>
</div>
<span>€8</span>
</article>
</div>
</div>
</section>
<section class="vb-accordion-twenty-item">
<button class="vb-accordion-twenty-trigger" type="button" aria-expanded="false">
<span>Drinks</span>
<small>8 options</small>
<em></em>
</button>
<div class="vb-accordion-twenty-panel">
<div class="vb-accordion-twenty-content">
<article>
<div>
<strong>Fresh citrus lemonade</strong>
<p>Lemon, orange, mint, sparkling water, and crushed ice.</p>
</div>
<span>€5</span>
</article>
<article>
<div>
<strong>Iced berry tea</strong>
<p>Cold black tea, forest berries, lime, and light syrup.</p>
</div>
<span>€5</span>
</article>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-twenty-demo,
.vb-accordion-twenty-demo * {
box-sizing: border-box;
}
.vb-accordion-twenty-demo {
margin: 28px 0;
padding: 38px;
border-radius: 14px;
background:
radial-gradient(circle at 16% 18%, rgba(251, 146, 60, 0.18), transparent 34%),
radial-gradient(circle at 84% 22%, rgba(120, 53, 15, 0.12), transparent 36%),
linear-gradient(135deg, #fff7ed 0%, #fef3c7 52%, #ffffff 100%) !important;
border: 1px solid rgba(251, 146, 60, 0.30);
box-shadow: 0 24px 70px rgba(120, 53, 15, 0.12);
}
.vb-accordion-twenty-menu {
display: grid;
grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-twenty-cover {
position: relative;
overflow: hidden;
min-height: 560px;
padding: 30px;
border-radius: 12px 44px 12px 44px;
background:
radial-gradient(circle at 26% 18%, rgba(255,255,255,0.26), transparent 34%),
linear-gradient(135deg, #7c2d12, #b45309 56%, #f97316) !important;
box-shadow: 0 30px 90px rgba(154, 52, 18, 0.24);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vb-accordion-twenty-cover::before {
content: "";
position: absolute;
right: -90px;
top: -90px;
width: 240px;
height: 240px;
border-radius: 999px;
border: 34px solid rgba(255,255,255,0.10);
}
.vb-accordion-twenty-cover > span {
align-self: flex-start;
display: inline-flex;
position: relative;
z-index: 2;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.20);
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twenty-cover h3 {
position: relative;
z-index: 2;
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(42px, 5vw, 72px) !important;
line-height: 0.88 !important;
font-weight: 950 !important;
letter-spacing: -0.09em;
}
.vb-accordion-twenty-cover p {
position: relative;
z-index: 2;
margin: 0 !important;
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-twenty-hours {
position: relative;
z-index: 2;
padding: 18px;
border-radius: 24px 8px 24px 8px;
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.18);
margin-top: 28px;
}
.vb-accordion-twenty-hours strong {
display: block;
margin-bottom: 6px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px;
font-weight: 950;
}
.vb-accordion-twenty-hours small {
color: #fed7aa !important;
-webkit-text-fill-color: #fed7aa !important;
font-size: 14px;
font-weight: 850;
}
.vb-accordion-twenty-board {
display: grid;
align-content: start;
gap: 13px;
}
.vb-accordion-twenty-item {
overflow: hidden;
border-radius: 8px 28px 8px 28px;
background: #fffaf0;
border: 1px solid rgba(180, 83, 9, 0.20);
box-shadow: 0 18px 46px rgba(120, 53, 15, 0.08);
}
.vb-accordion-twenty-item.is-open {
border-color: rgba(180, 83, 9, 0.42);
box-shadow: 0 24px 62px rgba(180, 83, 9, 0.14);
}
.vb-accordion-twenty-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 86px 42px;
align-items: center;
gap: 14px;
width: 100%;
min-height: 82px;
padding: 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twenty-trigger span {
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: 24px;
line-height: 1.05;
font-weight: 950;
letter-spacing: -0.055em;
}
.vb-accordion-twenty-trigger small {
justify-self: end;
padding: 8px 11px;
border-radius: 999px;
background: #ffedd5;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 12px;
font-weight: 950;
}
.vb-accordion-twenty-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(180, 83, 9, 0.22);
}
.vb-accordion-twenty-trigger em::before,
.vb-accordion-twenty-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #9a3412;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-twenty-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twenty-item.is-open .vb-accordion-twenty-trigger em {
background: #9a3412;
}
.vb-accordion-twenty-item.is-open .vb-accordion-twenty-trigger em::before,
.vb-accordion-twenty-item.is-open .vb-accordion-twenty-trigger em::after {
background: #ffffff;
}
.vb-accordion-twenty-item.is-open .vb-accordion-twenty-trigger em::after {
opacity: 0;
}
.vb-accordion-twenty-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twenty-content {
display: grid;
gap: 12px;
padding: 0 20px 20px;
}
.vb-accordion-twenty-content article {
display: grid;
grid-template-columns: minmax(0, 1fr) 54px;
gap: 14px;
align-items: start;
padding: 16px;
border-radius: 18px 6px 18px 6px;
background: #ffffff;
border: 1px solid rgba(254, 215, 170, 0.9);
}
.vb-accordion-twenty-content strong {
display: block;
margin-bottom: 6px;
color: #431407 !important;
-webkit-text-fill-color: #431407 !important;
font-size: 17px;
line-height: 1.2;
font-weight: 950;
}
.vb-accordion-twenty-content p {
margin: 0 !important;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 14px;
line-height: 1.6;
font-weight: 650;
}
.vb-accordion-twenty-content article > span {
justify-self: end;
color: #b45309 !important;
-webkit-text-fill-color: #b45309 !important;
font-size: 20px;
font-weight: 950;
}
@media (max-width: 900px) {
.vb-accordion-twenty-menu {
grid-template-columns: 1fr;
}
.vb-accordion-twenty-cover {
min-height: auto;
}
}
@media (max-width: 640px) {
.vb-accordion-twenty-demo {
padding: 18px;
}
.vb-accordion-twenty-cover {
padding: 24px;
border-radius: 10px 32px 10px 32px;
}
.vb-accordion-twenty-cover h3 {
font-size: 42px !important;
}
.vb-accordion-twenty-trigger {
grid-template-columns: 1fr 40px;
padding: 18px;
}
.vb-accordion-twenty-trigger small {
grid-column: 1;
justify-self: start;
}
.vb-accordion-twenty-content article {
grid-template-columns: 1fr;
}
.vb-accordion-twenty-content article > span {
justify-self: start;
}
}
This restaurant menu accordion is useful for restaurants, cafes, bakeries, food delivery websites, catering pages, hotel dining sections, recipe collections, and any hospitality website that needs expandable menu categories.
21. Product Details Accordion
A product details accordion is useful for ecommerce product pages where technical information, shipping details, materials, sizing, warranty information, and care instructions should stay organized without making the product page too long.
This example uses a premium product page layout with a product card, stock badge, specification rows, and one-open-at-a-time JavaScript behavior. It is designed for ecommerce and product information sections rather than a normal FAQ block.
- Ecommerce product details accordion
- One-open-at-a-time behavior
- Specification rows and product information
- Stock badge and product-style card
- Useful for product pages and online stores
Example 21
Product Details Accordion
Use expandable product information blocks to keep ecommerce pages clean and easy to scan.
In stock
Ships in 1-2 business days
Frame
Powder-coated aluminum
Surface
Scratch-resistant finish
The accordion can be used to show material quality, construction details, certifications, and product durability notes.
Width
120 cm
Height
86 cm
Use this panel for size charts, measurement notes, product variations, and fitting information.
Dispatch
1-2 business days
Delivery
Tracked courier
This section can explain shipping regions, delivery time, packaging, pickup options, and tracking details.
Warranty
24 months
Returns
14-day return window
Use this area for return rules, warranty coverage, replacement details, and customer support information.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentyone]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentyone-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-twentyone-trigger");
const panel = item.querySelector(".vb-accordion-twentyone-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-twentyone-trigger");
const panel = item.querySelector(".vb-accordion-twentyone-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentyone-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-twentyone-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twentyone-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-twentyone-demo">
<div class="vb-accordion-twentyone-layout" data-vb-accordion-twentyone>
<div class="vb-accordion-twentyone-product">
<span>Example 21</span>
<div class="vb-accordion-twentyone-image">
<div class="vb-accordion-twentyone-box">
<i></i>
<i></i>
<i></i>
</div>
</div>
<h3>Product Details Accordion</h3>
<p>Use expandable product information blocks to keep ecommerce pages clean and easy to scan.</p>
<div class="vb-accordion-twentyone-stock">
<strong>In stock</strong>
<small>Ships in 1-2 business days</small>
</div>
</div>
<div class="vb-accordion-twentyone-info">
<section class="vb-accordion-twentyone-item is-open">
<button class="vb-accordion-twentyone-trigger" type="button" aria-expanded="true">
<span>Materials and build</span>
<em></em>
</button>
<div class="vb-accordion-twentyone-panel">
<div class="vb-accordion-twentyone-content">
<div class="vb-accordion-twentyone-spec">
<strong>Frame</strong>
<span>Powder-coated aluminum</span>
</div>
<div class="vb-accordion-twentyone-spec">
<strong>Surface</strong>
<span>Scratch-resistant finish</span>
</div>
<p>The accordion can be used to show material quality, construction details, certifications, and product durability notes.</p>
</div>
</div>
</section>
<section class="vb-accordion-twentyone-item">
<button class="vb-accordion-twentyone-trigger" type="button" aria-expanded="false">
<span>Dimensions and sizing</span>
<em></em>
</button>
<div class="vb-accordion-twentyone-panel">
<div class="vb-accordion-twentyone-content">
<div class="vb-accordion-twentyone-spec">
<strong>Width</strong>
<span>120 cm</span>
</div>
<div class="vb-accordion-twentyone-spec">
<strong>Height</strong>
<span>86 cm</span>
</div>
<p>Use this panel for size charts, measurement notes, product variations, and fitting information.</p>
</div>
</div>
</section>
<section class="vb-accordion-twentyone-item">
<button class="vb-accordion-twentyone-trigger" type="button" aria-expanded="false">
<span>Shipping and delivery</span>
<em></em>
</button>
<div class="vb-accordion-twentyone-panel">
<div class="vb-accordion-twentyone-content">
<div class="vb-accordion-twentyone-spec">
<strong>Dispatch</strong>
<span>1-2 business days</span>
</div>
<div class="vb-accordion-twentyone-spec">
<strong>Delivery</strong>
<span>Tracked courier</span>
</div>
<p>This section can explain shipping regions, delivery time, packaging, pickup options, and tracking details.</p>
</div>
</div>
</section>
<section class="vb-accordion-twentyone-item">
<button class="vb-accordion-twentyone-trigger" type="button" aria-expanded="false">
<span>Warranty and returns</span>
<em></em>
</button>
<div class="vb-accordion-twentyone-panel">
<div class="vb-accordion-twentyone-content">
<div class="vb-accordion-twentyone-spec">
<strong>Warranty</strong>
<span>24 months</span>
</div>
<div class="vb-accordion-twentyone-spec">
<strong>Returns</strong>
<span>14-day return window</span>
</div>
<p>Use this area for return rules, warranty coverage, replacement details, and customer support information.</p>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-twentyone-demo,
.vb-accordion-twentyone-demo * {
box-sizing: border-box;
}
.vb-accordion-twentyone-demo {
margin: 28px 0;
padding: 38px;
border-radius: 46px 46px 46px 10px;
background:
radial-gradient(circle at 16% 20%, rgba(15, 23, 42, 0.08), transparent 34%),
radial-gradient(circle at 86% 18%, rgba(59, 130, 246, 0.14), transparent 36%),
linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #ffffff 100%) !important;
border: 1px solid rgba(99, 102, 241, 0.22);
box-shadow: 0 24px 70px rgba(30, 41, 59, 0.10);
}
.vb-accordion-twentyone-layout {
display: grid;
grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-twentyone-product {
overflow: hidden;
padding: 28px;
border-radius: 36px 36px 36px 8px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.26);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}
.vb-accordion-twentyone-product > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentyone-image {
position: relative;
min-height: 260px;
margin-bottom: 24px;
border-radius: 30px 30px 30px 8px;
background:
radial-gradient(circle at 25% 18%, rgba(255,255,255,0.24), transparent 34%),
linear-gradient(135deg, #1e293b, #2563eb 58%, #06b6d4) !important;
overflow: hidden;
}
.vb-accordion-twentyone-box {
position: absolute;
left: 50%;
top: 50%;
width: 170px;
height: 150px;
border-radius: 28px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.20);
transform: translate(-50%, -50%) rotate(-8deg);
box-shadow: 0 28px 70px rgba(2, 6, 23, 0.26);
}
.vb-accordion-twentyone-box i {
position: absolute;
display: block;
border-radius: 999px;
background: rgba(255,255,255,0.55);
}
.vb-accordion-twentyone-box i:nth-child(1) {
left: 24px;
top: 28px;
width: 74px;
height: 12px;
}
.vb-accordion-twentyone-box i:nth-child(2) {
left: 24px;
top: 58px;
width: 118px;
height: 12px;
}
.vb-accordion-twentyone-box i:nth-child(3) {
left: 24px;
top: 92px;
width: 92px;
height: 34px;
border-radius: 14px;
background: #ffffff;
}
.vb-accordion-twentyone-product h3 {
margin: 0 0 12px !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(34px, 5vw, 58px) !important;
line-height: 0.94 !important;
font-weight: 950 !important;
letter-spacing: -0.08em;
}
.vb-accordion-twentyone-product p {
margin: 0 0 22px !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
.vb-accordion-twentyone-stock {
display: grid;
gap: 4px;
padding: 16px;
border-radius: 20px;
background: #ecfdf5;
border: 1px solid rgba(16, 185, 129, 0.18);
}
.vb-accordion-twentyone-stock strong {
color: #047857 !important;
-webkit-text-fill-color: #047857 !important;
font-size: 15px;
font-weight: 950;
}
.vb-accordion-twentyone-stock small {
color: #065f46 !important;
-webkit-text-fill-color: #065f46 !important;
font-size: 13px;
font-weight: 800;
}
.vb-accordion-twentyone-info {
display: grid;
align-content: start;
gap: 13px;
}
.vb-accordion-twentyone-item {
overflow: hidden;
border-radius: 8px 28px 28px 28px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}
.vb-accordion-twentyone-item.is-open {
border-color: rgba(37, 99, 235, 0.34);
box-shadow: 0 24px 64px rgba(37, 99, 235, 0.12);
}
.vb-accordion-twentyone-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 76px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentyone-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 20px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twentyone-trigger em {
position: relative;
width: 44px;
height: 44px;
border-radius: 16px;
background: #eff6ff;
border: 1px solid rgba(37, 99, 235, 0.16);
}
.vb-accordion-twentyone-trigger em::before,
.vb-accordion-twentyone-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
border-radius: 999px;
background: #2563eb;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-twentyone-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentyone-item.is-open .vb-accordion-twentyone-trigger em {
background: #2563eb;
}
.vb-accordion-twentyone-item.is-open .vb-accordion-twentyone-trigger em::before,
.vb-accordion-twentyone-item.is-open .vb-accordion-twentyone-trigger em::after {
background: #ffffff;
}
.vb-accordion-twentyone-item.is-open .vb-accordion-twentyone-trigger em::after {
opacity: 0;
}
.vb-accordion-twentyone-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twentyone-content {
display: grid;
gap: 10px;
padding: 0 20px 20px;
}
.vb-accordion-twentyone-spec {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
padding: 13px 14px;
border-radius: 16px;
background: #f8fafc;
}
.vb-accordion-twentyone-spec strong {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 13px;
font-weight: 950;
}
.vb-accordion-twentyone-spec span {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 13px;
font-weight: 800;
}
.vb-accordion-twentyone-content p {
margin: 6px 0 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
@media (max-width: 900px) {
.vb-accordion-twentyone-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-twentyone-demo {
padding: 18px;
border-radius: 32px 32px 32px 10px;
}
.vb-accordion-twentyone-product {
padding: 22px;
}
.vb-accordion-twentyone-product h3 {
font-size: 38px !important;
}
.vb-accordion-twentyone-spec {
grid-template-columns: 1fr;
gap: 4px;
}
}
This product details accordion is useful for WooCommerce product pages, ecommerce stores, product comparison pages, technical product sheets, size guides, shipping information sections, and warranty blocks.
22. Event Schedule Accordion
An event schedule accordion is useful for conferences, webinars, workshops, festivals, online summits, meetups, and event landing pages where users need to browse sessions without seeing the full agenda at once.
This example uses an agenda-style layout with time blocks, speaker labels, session tracks, and multi-open JavaScript behavior. It has a clear event schedule structure instead of a generic question-and-answer layout.
- Event agenda accordion layout
- Multi-open session behavior
- Time, speaker, and track labels
- Conference-style visual design
- Useful for webinars, workshops, and events
Example 22
Event Schedule Accordion
Show event sessions, speakers, tracks, and time slots inside expandable schedule rows.
Day 1
Conference agenda
A focused opening session covering the event theme, main ideas, and what attendees can expect during the day.
Speaker
Alex Morgan
A practical session where attendees build interactive components using vanilla JavaScript, semantic HTML, and modern CSS.
Speaker
Jordan Lee
A panel discussion about reusable components, interface consistency, accessibility, documentation, and scalable design systems.
Speakers
4 panelists
A live review session where real UI components are improved for clarity, responsiveness, accessibility, and better user experience.
Format
Interactive review
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentytwo]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentytwo-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-twentytwo-trigger");
const panel = item.querySelector(".vb-accordion-twentytwo-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentytwo-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-twentytwo-demo">
<div class="vb-accordion-twentytwo-schedule" data-vb-accordion-twentytwo>
<div class="vb-accordion-twentytwo-header">
<span>Example 22</span>
<h3>Event Schedule Accordion</h3>
<p>Show event sessions, speakers, tracks, and time slots inside expandable schedule rows.</p>
</div>
<div class="vb-accordion-twentytwo-day">
<strong>Day 1</strong>
<small>Conference agenda</small>
</div>
<div class="vb-accordion-twentytwo-list">
<article class="vb-accordion-twentytwo-item is-open">
<button class="vb-accordion-twentytwo-trigger" type="button" aria-expanded="true">
<time>09:00</time>
<span>
<strong>Opening keynote</strong>
<small>Main stage · 45 min</small>
</span>
<em>Keynote</em>
<i></i>
</button>
<div class="vb-accordion-twentytwo-panel">
<div class="vb-accordion-twentytwo-content">
<p>A focused opening session covering the event theme, main ideas, and what attendees can expect during the day.</p>
<div>
<strong>Speaker</strong>
<span>Alex Morgan</span>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentytwo-item">
<button class="vb-accordion-twentytwo-trigger" type="button" aria-expanded="false">
<time>10:15</time>
<span>
<strong>JavaScript UI workshop</strong>
<small>Workshop room · 90 min</small>
</span>
<em>Workshop</em>
<i></i>
</button>
<div class="vb-accordion-twentytwo-panel">
<div class="vb-accordion-twentytwo-content">
<p>A practical session where attendees build interactive components using vanilla JavaScript, semantic HTML, and modern CSS.</p>
<div>
<strong>Speaker</strong>
<span>Jordan Lee</span>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentytwo-item">
<button class="vb-accordion-twentytwo-trigger" type="button" aria-expanded="false">
<time>13:30</time>
<span>
<strong>Design systems panel</strong>
<small>Panel room · 60 min</small>
</span>
<em>Panel</em>
<i></i>
</button>
<div class="vb-accordion-twentytwo-panel">
<div class="vb-accordion-twentytwo-content">
<p>A panel discussion about reusable components, interface consistency, accessibility, documentation, and scalable design systems.</p>
<div>
<strong>Speakers</strong>
<span>4 panelists</span>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentytwo-item">
<button class="vb-accordion-twentytwo-trigger" type="button" aria-expanded="false">
<time>15:00</time>
<span>
<strong>Live component review</strong>
<small>Main stage · 50 min</small>
</span>
<em>Live</em>
<i></i>
</button>
<div class="vb-accordion-twentytwo-panel">
<div class="vb-accordion-twentytwo-content">
<p>A live review session where real UI components are improved for clarity, responsiveness, accessibility, and better user experience.</p>
<div>
<strong>Format</strong>
<span>Interactive review</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-twentytwo-demo,
.vb-accordion-twentytwo-demo * {
box-sizing: border-box;
}
.vb-accordion-twentytwo-demo {
margin: 28px 0;
padding: 38px;
border-radius: 10px 50px 50px 50px;
background:
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(0deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(135deg, #f8fafc 0%, #f0f9ff 48%, #ffffff 100%) !important;
background-size: 30px 30px, 30px 30px, auto !important;
border: 1px solid rgba(14, 165, 233, 0.22);
box-shadow: 0 24px 70px rgba(8, 47, 73, 0.10);
}
.vb-accordion-twentytwo-schedule {
max-width: 1080px;
margin: 0 auto;
}
.vb-accordion-twentytwo-header {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.65fr);
gap: 26px;
align-items: end;
margin-bottom: 22px;
}
.vb-accordion-twentytwo-header span {
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: #0369a1;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentytwo-header h3 {
margin: 0 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: clamp(38px, 5vw, 72px) !important;
line-height: 0.92 !important;
font-weight: 950 !important;
letter-spacing: -0.085em;
}
.vb-accordion-twentytwo-header p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentytwo-day {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
padding: 16px 18px;
border-radius: 22px 22px 6px 22px;
background: #0f172a;
}
.vb-accordion-twentytwo-day strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 20px;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-twentytwo-day small {
color: #bae6fd !important;
-webkit-text-fill-color: #bae6fd !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-twentytwo-list {
position: relative;
display: grid;
gap: 12px;
}
.vb-accordion-twentytwo-list::before {
content: "";
position: absolute;
left: 46px;
top: 24px;
bottom: 24px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #0ea5e9, #2563eb, #7c3aed);
}
.vb-accordion-twentytwo-item {
position: relative;
overflow: hidden;
border-radius: 28px 8px 28px 28px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.vb-accordion-twentytwo-item.is-open {
border-color: rgba(14, 165, 233, 0.38);
box-shadow: 0 24px 64px rgba(14, 165, 233, 0.14);
}
.vb-accordion-twentytwo-trigger {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 92px minmax(0, 1fr) 96px 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 86px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentytwo-trigger time {
display: inline-flex;
align-items: center;
justify-content: center;
width: 74px;
min-height: 46px;
border-radius: 18px;
background: #e0f2fe;
color: #0369a1 !important;
-webkit-text-fill-color: #0369a1 !important;
font-size: 15px;
font-weight: 950;
border: 4px solid #ffffff;
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.20);
}
.vb-accordion-twentytwo-trigger strong {
display: block;
margin-bottom: 4px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 20px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-twentytwo-trigger small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 800;
}
.vb-accordion-twentytwo-trigger em {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 11px;
border-radius: 999px;
background: #eef2ff;
color: #4338ca !important;
-webkit-text-fill-color: #4338ca !important;
font-size: 12px;
font-style: normal;
font-weight: 950;
}
.vb-accordion-twentytwo-trigger i {
position: relative;
width: 42px;
height: 42px;
border-radius: 14px;
background: #f0f9ff;
border: 1px solid rgba(14, 165, 233, 0.18);
}
.vb-accordion-twentytwo-trigger i::before,
.vb-accordion-twentytwo-trigger i::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #0284c7;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-twentytwo-trigger i::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentytwo-item.is-open .vb-accordion-twentytwo-trigger i {
background: #0284c7;
}
.vb-accordion-twentytwo-item.is-open .vb-accordion-twentytwo-trigger i::before,
.vb-accordion-twentytwo-item.is-open .vb-accordion-twentytwo-trigger i::after {
background: #ffffff;
}
.vb-accordion-twentytwo-item.is-open .vb-accordion-twentytwo-trigger i::after {
opacity: 0;
}
.vb-accordion-twentytwo-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twentytwo-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
gap: 16px;
padding: 0 20px 20px 128px;
}
.vb-accordion-twentytwo-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentytwo-content div {
padding: 14px;
border-radius: 18px;
background: #f8fafc;
}
.vb-accordion-twentytwo-content div strong {
display: block;
margin-bottom: 5px;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 13px;
font-weight: 950;
}
.vb-accordion-twentytwo-content div span {
color: #0369a1 !important;
-webkit-text-fill-color: #0369a1 !important;
font-size: 13px;
font-weight: 850;
}
@media (max-width: 840px) {
.vb-accordion-twentytwo-header {
grid-template-columns: 1fr;
}
.vb-accordion-twentytwo-trigger {
grid-template-columns: 80px minmax(0, 1fr) 42px;
}
.vb-accordion-twentytwo-trigger em {
grid-column: 2;
justify-self: start;
}
.vb-accordion-twentytwo-content {
grid-template-columns: 1fr;
padding-left: 112px;
}
}
@media (max-width: 640px) {
.vb-accordion-twentytwo-demo {
padding: 18px;
border-radius: 10px 34px 34px 34px;
}
.vb-accordion-twentytwo-header h3 {
font-size: 38px !important;
}
.vb-accordion-twentytwo-list::before {
display: none;
}
.vb-accordion-twentytwo-trigger {
grid-template-columns: 1fr 38px;
padding: 18px;
}
.vb-accordion-twentytwo-trigger time,
.vb-accordion-twentytwo-trigger span,
.vb-accordion-twentytwo-trigger em {
grid-column: 1;
justify-self: start;
}
.vb-accordion-twentytwo-trigger i {
grid-column: 2;
grid-row: 1;
width: 38px;
height: 38px;
}
.vb-accordion-twentytwo-content {
padding: 0 18px 18px;
}
}
This event schedule accordion is useful for conferences, webinars, workshops, online events, product launches, festivals, meetups, training days, and event landing pages that need a compact expandable agenda.
23. Timeline Accordion
A timeline accordion is useful for project roadmaps, company history sections, launch timelines, onboarding flows, process pages, and case studies where events should be shown in a chronological order.
This example uses a vertical timeline with connected markers, year labels, milestone cards, and one-open-at-a-time JavaScript behavior. The layout feels like a roadmap instead of a normal stacked FAQ accordion.
- Timeline-style accordion layout
- Connected vertical milestone line
- One-open-at-a-time interaction
- Year labels and milestone details
- Useful for roadmaps, history, and process sections
Example 23
Timeline Accordion
Open each milestone to reveal project phases, company history, launch steps, or roadmap details.
01
The first phase defines goals, audience needs, content structure, design direction, technical requirements, and launch priorities.
- Audience research
- Feature planning
- Initial wireframes
02
The second phase turns the plan into visual sections, responsive layouts, reusable components, and polished interaction states.
- UI direction
- Responsive layouts
- Component styling
03
The development phase connects markup, styling, JavaScript interactions, accessibility states, and reusable content patterns.
- HTML structure
- JavaScript behavior
- Testing and fixes
04
The final phase includes publishing, analytics review, user feedback, speed improvements, content updates, and conversion improvements.
- Launch checklist
- Performance review
- Content improvements
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentythree]");
if (!accordion) return;
const steps = Array.from(accordion.querySelectorAll(".vb-accordion-twentythree-step"));
function closeStep(step) {
const button = step.querySelector(".vb-accordion-twentythree-trigger");
const panel = step.querySelector(".vb-accordion-twentythree-panel");
const label = button.querySelector("em");
step.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
label.textContent = "Open";
panel.style.maxHeight = "0px";
}
function openStep(step) {
const button = step.querySelector(".vb-accordion-twentythree-trigger");
const panel = step.querySelector(".vb-accordion-twentythree-panel");
const label = button.querySelector("em");
step.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
label.textContent = "Active";
panel.style.maxHeight = panel.scrollHeight + "px";
}
steps.forEach(function (step) {
const button = step.querySelector(".vb-accordion-twentythree-trigger");
button.addEventListener("click", function () {
const isOpen = step.classList.contains("is-open");
steps.forEach(closeStep);
if (!isOpen) {
openStep(step);
}
});
});
const defaultStep = accordion.querySelector(".vb-accordion-twentythree-step.is-open");
if (defaultStep) {
openStep(defaultStep);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twentythree-step.is-open");
if (open) {
openStep(open);
}
});
})();
HTML
<div class="vb-accordion-twentythree-demo">
<div class="vb-accordion-twentythree-wrap" data-vb-accordion-twentythree>
<div class="vb-accordion-twentythree-head">
<span>Example 23</span>
<h3>Timeline Accordion</h3>
<p>Open each milestone to reveal project phases, company history, launch steps, or roadmap details.</p>
</div>
<div class="vb-accordion-twentythree-line">
<article class="vb-accordion-twentythree-step is-open">
<div class="vb-accordion-twentythree-marker">
<strong>01</strong>
</div>
<div class="vb-accordion-twentythree-card">
<button class="vb-accordion-twentythree-trigger" type="button" aria-expanded="true">
<span>
<small>January 2026</small>
<strong>Research and planning</strong>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-twentythree-panel">
<div class="vb-accordion-twentythree-content">
<p>The first phase defines goals, audience needs, content structure, design direction, technical requirements, and launch priorities.</p>
<ul>
<li>Audience research</li>
<li>Feature planning</li>
<li>Initial wireframes</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentythree-step">
<div class="vb-accordion-twentythree-marker">
<strong>02</strong>
</div>
<div class="vb-accordion-twentythree-card">
<button class="vb-accordion-twentythree-trigger" type="button" aria-expanded="false">
<span>
<small>February 2026</small>
<strong>Interface design</strong>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-twentythree-panel">
<div class="vb-accordion-twentythree-content">
<p>The second phase turns the plan into visual sections, responsive layouts, reusable components, and polished interaction states.</p>
<ul>
<li>UI direction</li>
<li>Responsive layouts</li>
<li>Component styling</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentythree-step">
<div class="vb-accordion-twentythree-marker">
<strong>03</strong>
</div>
<div class="vb-accordion-twentythree-card">
<button class="vb-accordion-twentythree-trigger" type="button" aria-expanded="false">
<span>
<small>March 2026</small>
<strong>Development sprint</strong>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-twentythree-panel">
<div class="vb-accordion-twentythree-content">
<p>The development phase connects markup, styling, JavaScript interactions, accessibility states, and reusable content patterns.</p>
<ul>
<li>HTML structure</li>
<li>JavaScript behavior</li>
<li>Testing and fixes</li>
</ul>
</div>
</div>
</div>
</article>
<article class="vb-accordion-twentythree-step">
<div class="vb-accordion-twentythree-marker">
<strong>04</strong>
</div>
<div class="vb-accordion-twentythree-card">
<button class="vb-accordion-twentythree-trigger" type="button" aria-expanded="false">
<span>
<small>April 2026</small>
<strong>Launch and review</strong>
</span>
<em>Open</em>
</button>
<div class="vb-accordion-twentythree-panel">
<div class="vb-accordion-twentythree-content">
<p>The final phase includes publishing, analytics review, user feedback, speed improvements, content updates, and conversion improvements.</p>
<ul>
<li>Launch checklist</li>
<li>Performance review</li>
<li>Content improvements</li>
</ul>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
CSS
.vb-accordion-twentythree-demo,
.vb-accordion-twentythree-demo * {
box-sizing: border-box;
}
.vb-accordion-twentythree-demo {
margin: 28px 0;
padding: 42px;
border-radius: 60px 6px 60px 6px;
background:
conic-gradient(from 180deg at 20% 20%, rgba(168, 85, 247, 0.18), transparent 26%, rgba(14, 165, 233, 0.18), transparent 58%, rgba(236, 72, 153, 0.14), transparent 78%),
linear-gradient(135deg, #fdf4ff 0%, #eff6ff 48%, #ffffff 100%) !important;
border: 1px solid rgba(168, 85, 247, 0.24);
box-shadow: 0 28px 80px rgba(88, 28, 135, 0.12);
}
.vb-accordion-twentythree-wrap {
max-width: 1080px;
margin: 0 auto;
}
.vb-accordion-twentythree-head {
position: relative;
max-width: 760px;
margin-bottom: 34px;
padding-left: 30px;
}
.vb-accordion-twentythree-head::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 8px;
border-radius: 999px;
background: linear-gradient(180deg, #7c3aed, #0ea5e9, #ec4899);
}
.vb-accordion-twentythree-head span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 4px 18px 4px 18px;
background: #581c87;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentythree-head h3 {
margin: 0 0 12px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(40px, 5vw, 76px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.09em;
}
.vb-accordion-twentythree-head p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentythree-line {
position: relative;
display: grid;
gap: 18px;
}
.vb-accordion-twentythree-line::before {
content: "";
position: absolute;
left: 39px;
top: 30px;
bottom: 30px;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #7c3aed, #0ea5e9, #ec4899);
opacity: 0.45;
}
.vb-accordion-twentythree-step {
position: relative;
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.vb-accordion-twentythree-marker {
position: relative;
z-index: 3;
width: 82px;
height: 82px;
border-radius: 999px;
padding: 8px;
background: #ffffff;
box-shadow: 0 14px 38px rgba(88, 28, 135, 0.14);
}
.vb-accordion-twentythree-marker strong {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: inherit;
background: #ede9fe;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
font-size: 18px;
font-weight: 950;
}
.vb-accordion-twentythree-step.is-open .vb-accordion-twentythree-marker strong {
background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-twentythree-card {
overflow: hidden;
border-radius: 30px 30px 30px 6px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
.vb-accordion-twentythree-step.is-open .vb-accordion-twentythree-card {
border-color: rgba(124, 58, 237, 0.34);
box-shadow: 0 26px 70px rgba(124, 58, 237, 0.13);
}
.vb-accordion-twentythree-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 74px;
align-items: center;
gap: 18px;
width: 100%;
min-height: 88px;
padding: 20px 22px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentythree-trigger small {
display: inline-flex;
margin-bottom: 7px;
padding: 5px 9px;
border-radius: 999px;
background: #f5f3ff;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vb-accordion-twentythree-trigger strong {
display: block;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 22px;
line-height: 1.1;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twentythree-trigger em {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 42px;
border-radius: 4px 16px 4px 16px;
background: #f8fafc;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 12px;
font-style: normal;
font-weight: 950;
text-transform: uppercase;
}
.vb-accordion-twentythree-step.is-open .vb-accordion-twentythree-trigger em {
background: #7c3aed;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-twentythree-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.32s ease;
}
.vb-accordion-twentythree-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 18px;
padding: 0 22px 22px;
}
.vb-accordion-twentythree-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentythree-content ul {
display: grid;
gap: 8px;
margin: 0 !important;
padding: 14px !important;
border-radius: 18px 18px 18px 4px;
background: #f8fafc;
list-style: none !important;
}
.vb-accordion-twentythree-content li {
position: relative;
margin: 0 !important;
padding-left: 19px;
color: #334155 !important;
-webkit-text-fill-color: #334155 !important;
font-size: 13px;
line-height: 1.45;
font-weight: 850;
}
.vb-accordion-twentythree-content li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 999px;
background: #7c3aed;
}
@media (max-width: 780px) {
.vb-accordion-twentythree-demo {
padding: 20px;
border-radius: 40px 6px 40px 6px;
}
.vb-accordion-twentythree-head {
padding-left: 22px;
}
.vb-accordion-twentythree-head h3 {
font-size: 40px !important;
}
.vb-accordion-twentythree-line::before {
left: 24px;
}
.vb-accordion-twentythree-step {
grid-template-columns: 54px minmax(0, 1fr);
gap: 12px;
}
.vb-accordion-twentythree-marker {
width: 54px;
height: 54px;
padding: 5px;
}
.vb-accordion-twentythree-marker strong {
font-size: 13px;
}
.vb-accordion-twentythree-trigger {
grid-template-columns: 1fr;
min-height: auto;
padding: 18px;
}
.vb-accordion-twentythree-trigger em {
justify-self: start;
min-width: 70px;
}
.vb-accordion-twentythree-content {
grid-template-columns: 1fr;
padding: 0 18px 18px;
}
}
This timeline accordion is useful for product roadmaps, agency process sections, company history pages, startup launch plans, case studies, onboarding flows, and project milestone sections.
24. Magazine Story Accordion
A magazine story accordion is useful for editorial websites, online magazines, storytelling landing pages, article collections, news features, portfolio case studies, and content-rich brand pages.
This example uses a large editorial cover panel, numbered story cards, image-like CSS blocks, pull-quote styling, and multi-open JavaScript behavior. It is visually built like a magazine feature instead of a support, dashboard, or product accordion.
- Editorial magazine-style accordion
- Multi-open JavaScript behavior
- Large story cover and article cards
- Pull-quote and feature labels
- Useful for magazines, blogs, and storytelling pages
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentyfour]");
if (!accordion) return;
const stories = Array.from(accordion.querySelectorAll(".vb-accordion-twentyfour-story"));
function updateStory(story) {
const button = story.querySelector(".vb-accordion-twentyfour-trigger");
const panel = story.querySelector(".vb-accordion-twentyfour-panel");
const isOpen = story.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
stories.forEach(function (story) {
const button = story.querySelector(".vb-accordion-twentyfour-trigger");
button.addEventListener("click", function () {
story.classList.toggle("is-open");
updateStory(story);
});
updateStory(story);
});
window.addEventListener("resize", function () {
stories.forEach(updateStory);
});
})();
HTML
<div class="vb-accordion-twentyfour-demo">
<div class="vb-accordion-twentyfour-layout" data-vb-accordion-twentyfour>
<aside class="vb-accordion-twentyfour-cover">
<span>Example 24</span>
<h3>Magazine Story Accordion</h3>
<p>Reveal editorial story sections with a content-first accordion layout inspired by modern magazine pages.</p>
<div class="vb-accordion-twentyfour-quote">
<strong>“Design becomes stronger when content has rhythm.”</strong>
</div>
</aside>
<section class="vb-accordion-twentyfour-stories">
<article class="vb-accordion-twentyfour-story is-open">
<button class="vb-accordion-twentyfour-trigger" type="button" aria-expanded="true">
<span>Feature 01</span>
<strong>The opening idea</strong>
<em>+</em>
</button>
<div class="vb-accordion-twentyfour-panel">
<div class="vb-accordion-twentyfour-content">
<div class="vb-accordion-twentyfour-thumb vb-accordion-twentyfour-thumb-a"></div>
<p>Use this section to introduce the core idea of an article, case study, brand story, or editorial feature.</p>
</div>
</div>
</article>
<article class="vb-accordion-twentyfour-story">
<button class="vb-accordion-twentyfour-trigger" type="button" aria-expanded="false">
<span>Feature 02</span>
<strong>Behind the process</strong>
<em>+</em>
</button>
<div class="vb-accordion-twentyfour-panel">
<div class="vb-accordion-twentyfour-content">
<div class="vb-accordion-twentyfour-thumb vb-accordion-twentyfour-thumb-b"></div>
<p>This panel can explain the process, research, decisions, mistakes, improvements, or the thinking behind the final result.</p>
</div>
</div>
</article>
<article class="vb-accordion-twentyfour-story">
<button class="vb-accordion-twentyfour-trigger" type="button" aria-expanded="false">
<span>Feature 03</span>
<strong>Visual direction</strong>
<em>+</em>
</button>
<div class="vb-accordion-twentyfour-panel">
<div class="vb-accordion-twentyfour-content">
<div class="vb-accordion-twentyfour-thumb vb-accordion-twentyfour-thumb-c"></div>
<p>Use this section for visual decisions, layout notes, typography choices, color direction, and interface details.</p>
</div>
</div>
</article>
<article class="vb-accordion-twentyfour-story">
<button class="vb-accordion-twentyfour-trigger" type="button" aria-expanded="false">
<span>Feature 04</span>
<strong>Final outcome</strong>
<em>+</em>
</button>
<div class="vb-accordion-twentyfour-panel">
<div class="vb-accordion-twentyfour-content">
<div class="vb-accordion-twentyfour-thumb vb-accordion-twentyfour-thumb-d"></div>
<p>The final panel can summarize the result, measurable improvements, lessons learned, and next steps for the project.</p>
</div>
</div>
</article>
</section>
</div>
</div>
CSS
.vb-accordion-twentyfour-demo,
.vb-accordion-twentyfour-demo * {
box-sizing: border-box;
}
.vb-accordion-twentyfour-demo {
margin: 28px 0;
padding: 40px;
background:
linear-gradient(90deg, rgba(17, 24, 39, 0.07) 1px, transparent 1px),
linear-gradient(135deg, #fff7ed 0%, #fdf2f8 48%, #ffffff 100%) !important;
background-size: 18px 18px, auto !important;
border: 1px solid rgba(190, 24, 93, 0.18);
border-radius: 0;
box-shadow: 0 28px 80px rgba(131, 24, 67, 0.10);
}
.vb-accordion-twentyfour-layout {
display: grid;
grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
gap: 28px;
max-width: 1140px;
margin: 0 auto;
}
.vb-accordion-twentyfour-cover {
position: relative;
min-height: 650px;
padding: 34px;
background:
radial-gradient(circle at 24% 18%, rgba(255,255,255,0.24), transparent 34%),
linear-gradient(135deg, #831843, #be123c 56%, #f97316) !important;
color: #ffffff;
overflow: hidden;
}
.vb-accordion-twentyfour-cover::before {
content: "";
position: absolute;
left: 34px;
right: 34px;
top: 120px;
height: 1px;
background: rgba(255,255,255,0.24);
}
.vb-accordion-twentyfour-cover::after {
content: "24";
position: absolute;
right: -20px;
bottom: -34px;
color: rgba(255,255,255,0.10);
-webkit-text-fill-color: rgba(255,255,255,0.10);
font-size: 220px;
line-height: 0.8;
font-weight: 950;
letter-spacing: -0.12em;
}
.vb-accordion-twentyfour-cover span {
display: inline-flex;
margin-bottom: 82px;
padding: 8px 12px;
border: 1px solid rgba(255,255,255,0.30);
color: #fff7ed !important;
-webkit-text-fill-color: #fff7ed !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.vb-accordion-twentyfour-cover h3 {
position: relative;
z-index: 2;
margin: 0 0 18px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(44px, 5vw, 78px) !important;
line-height: 0.86 !important;
font-weight: 950 !important;
letter-spacing: -0.1em;
}
.vb-accordion-twentyfour-cover p {
position: relative;
z-index: 2;
max-width: 390px;
margin: 0 !important;
color: #ffe4e6 !important;
-webkit-text-fill-color: #ffe4e6 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyfour-quote {
position: absolute;
left: 34px;
right: 34px;
bottom: 34px;
z-index: 2;
padding: 22px;
border-left: 5px solid #ffffff;
background: rgba(255,255,255,0.12);
}
.vb-accordion-twentyfour-quote strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 21px;
line-height: 1.25;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twentyfour-stories {
display: grid;
gap: 18px;
align-content: center;
}
.vb-accordion-twentyfour-story {
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(190, 24, 93, 0.18);
box-shadow: 0 18px 46px rgba(131, 24, 67, 0.08);
}
.vb-accordion-twentyfour-story:nth-child(2) {
margin-left: 34px;
}
.vb-accordion-twentyfour-story:nth-child(3) {
margin-right: 34px;
}
.vb-accordion-twentyfour-story.is-open {
box-shadow: 0 28px 72px rgba(190, 24, 93, 0.15);
border-color: rgba(190, 24, 93, 0.34);
}
.vb-accordion-twentyfour-trigger {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) 48px;
align-items: center;
gap: 18px;
width: 100%;
min-height: 88px;
padding: 20px 22px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentyfour-trigger span {
color: #be123c !important;
-webkit-text-fill-color: #be123c !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vb-accordion-twentyfour-trigger strong {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 26px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.06em;
}
.vb-accordion-twentyfour-trigger em {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid #111827;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 28px;
line-height: 1;
font-style: normal;
font-weight: 950;
transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.vb-accordion-twentyfour-story.is-open .vb-accordion-twentyfour-trigger em {
transform: rotate(45deg);
background: #be123c;
border-color: #be123c;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.vb-accordion-twentyfour-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.vb-accordion-twentyfour-content {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 20px;
padding: 0 22px 22px;
align-items: stretch;
}
.vb-accordion-twentyfour-thumb {
min-height: 150px;
background: #f9a8d4;
}
.vb-accordion-twentyfour-thumb-a {
background:
linear-gradient(135deg, rgba(255,255,255,0.34), transparent 40%),
linear-gradient(135deg, #be123c, #fb7185) !important;
}
.vb-accordion-twentyfour-thumb-b {
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.26) 0 8px, transparent 8px 16px),
linear-gradient(135deg, #7c2d12, #f97316) !important;
}
.vb-accordion-twentyfour-thumb-c {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 22%),
linear-gradient(135deg, #4c1d95, #c026d3) !important;
}
.vb-accordion-twentyfour-thumb-d {
background:
linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px),
linear-gradient(135deg, #0f172a, #be123c) !important;
background-size: 16px 16px, auto !important;
}
.vb-accordion-twentyfour-content p {
margin: 0 !important;
padding: 18px 0;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.8;
font-weight: 650;
}
@media (max-width: 900px) {
.vb-accordion-twentyfour-layout {
grid-template-columns: 1fr;
}
.vb-accordion-twentyfour-cover {
min-height: 520px;
}
}
@media (max-width: 680px) {
.vb-accordion-twentyfour-demo {
padding: 18px;
}
.vb-accordion-twentyfour-cover {
min-height: 520px;
padding: 24px;
}
.vb-accordion-twentyfour-cover h3 {
font-size: 42px !important;
}
.vb-accordion-twentyfour-quote {
left: 24px;
right: 24px;
bottom: 24px;
}
.vb-accordion-twentyfour-story:nth-child(2),
.vb-accordion-twentyfour-story:nth-child(3) {
margin-left: 0;
margin-right: 0;
}
.vb-accordion-twentyfour-trigger {
grid-template-columns: 1fr 44px;
gap: 12px;
}
.vb-accordion-twentyfour-trigger span,
.vb-accordion-twentyfour-trigger strong {
grid-column: 1;
}
.vb-accordion-twentyfour-trigger em {
grid-column: 2;
grid-row: 1 / span 2;
width: 44px;
height: 44px;
}
.vb-accordion-twentyfour-content {
grid-template-columns: 1fr;
}
}
This magazine story accordion is useful for online magazines, editorial landing pages, storytelling sections, blog feature pages, portfolio case studies, brand stories, article collections, and content-rich modern websites.
25. Analytics Report Accordion
An analytics report accordion is useful for dashboards, SEO reports, marketing summaries, SaaS analytics screens, client reports, performance audits, and admin panels where data sections need to be opened one by one.
This example uses a data-report layout with metric cards, chart-like CSS bars, percentage badges, and one-open-at-a-time JavaScript behavior. The visual style is built around analytics and reporting, not standard FAQ rows.
- Analytics dashboard accordion design
- One-open-at-a-time report sections
- Metric cards and chart-style bars
- Performance badges and data rows
- Useful for reports, dashboards, and audits
Example 25
Analytics Report Accordion
Open each report block to reveal metrics, traffic insights, and dashboard-style performance notes.
48K
Visitors
12.4%
Conversion
91
SEO score
Organic search traffic increased after publishing more practical JavaScript examples and improving internal linking between related posts.
Readers spent more time on pages with full visible code blocks, live previews, practical examples, and jump links to example sections.
Examples with unique layouts, different visual patterns, and complete JavaScript, HTML, and CSS code performed better than repeated designs.
Cleaner layout spacing, responsive code previews, faster components, and reduced visual repetition improved the overall page experience.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentyfive]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentyfive-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-twentyfive-trigger");
const panel = item.querySelector(".vb-accordion-twentyfive-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-twentyfive-trigger");
const panel = item.querySelector(".vb-accordion-twentyfive-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentyfive-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-twentyfive-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twentyfive-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-twentyfive-demo">
<div class="vb-accordion-twentyfive-report" data-vb-accordion-twentyfive>
<div class="vb-accordion-twentyfive-dashboard">
<div class="vb-accordion-twentyfive-title">
<span>Example 25</span>
<h3>Analytics Report Accordion</h3>
<p>Open each report block to reveal metrics, traffic insights, and dashboard-style performance notes.</p>
</div>
<div class="vb-accordion-twentyfive-metrics">
<div>
<strong>48K</strong>
<small>Visitors</small>
</div>
<div>
<strong>12.4%</strong>
<small>Conversion</small>
</div>
<div>
<strong>91</strong>
<small>SEO score</small>
</div>
</div>
</div>
<div class="vb-accordion-twentyfive-list">
<section class="vb-accordion-twentyfive-item is-open">
<button class="vb-accordion-twentyfive-trigger" type="button" aria-expanded="true">
<span>
<small>Traffic</small>
<strong>Organic search growth</strong>
</span>
<em>+24%</em>
<i></i>
</button>
<div class="vb-accordion-twentyfive-panel">
<div class="vb-accordion-twentyfive-content">
<p>Organic search traffic increased after publishing more practical JavaScript examples and improving internal linking between related posts.</p>
<div class="vb-accordion-twentyfive-bars">
<div><span style="width: 72%"></span></div>
<div><span style="width: 48%"></span></div>
<div><span style="width: 88%"></span></div>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyfive-item">
<button class="vb-accordion-twentyfive-trigger" type="button" aria-expanded="false">
<span>
<small>Engagement</small>
<strong>Longer reading time</strong>
</span>
<em>+18%</em>
<i></i>
</button>
<div class="vb-accordion-twentyfive-panel">
<div class="vb-accordion-twentyfive-content">
<p>Readers spent more time on pages with full visible code blocks, live previews, practical examples, and jump links to example sections.</p>
<div class="vb-accordion-twentyfive-bars">
<div><span style="width: 64%"></span></div>
<div><span style="width: 76%"></span></div>
<div><span style="width: 54%"></span></div>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyfive-item">
<button class="vb-accordion-twentyfive-trigger" type="button" aria-expanded="false">
<span>
<small>Content</small>
<strong>Example section performance</strong>
</span>
<em>+31%</em>
<i></i>
</button>
<div class="vb-accordion-twentyfive-panel">
<div class="vb-accordion-twentyfive-content">
<p>Examples with unique layouts, different visual patterns, and complete JavaScript, HTML, and CSS code performed better than repeated designs.</p>
<div class="vb-accordion-twentyfive-bars">
<div><span style="width: 92%"></span></div>
<div><span style="width: 61%"></span></div>
<div><span style="width: 83%"></span></div>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyfive-item">
<button class="vb-accordion-twentyfive-trigger" type="button" aria-expanded="false">
<span>
<small>Technical</small>
<strong>Page experience score</strong>
</span>
<em>+9%</em>
<i></i>
</button>
<div class="vb-accordion-twentyfive-panel">
<div class="vb-accordion-twentyfive-content">
<p>Cleaner layout spacing, responsive code previews, faster components, and reduced visual repetition improved the overall page experience.</p>
<div class="vb-accordion-twentyfive-bars">
<div><span style="width: 70%"></span></div>
<div><span style="width: 86%"></span></div>
<div><span style="width: 78%"></span></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-twentyfive-demo,
.vb-accordion-twentyfive-demo * {
box-sizing: border-box;
}
.vb-accordion-twentyfive-demo {
margin: 28px 0;
padding: 40px;
border-radius: 28px;
background:
radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.16), transparent 34%),
radial-gradient(circle at 88% 16%, rgba(59, 130, 246, 0.18), transparent 34%),
linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%) !important;
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
}
.vb-accordion-twentyfive-report {
max-width: 1120px;
margin: 0 auto;
}
.vb-accordion-twentyfive-dashboard {
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 24px;
align-items: stretch;
margin-bottom: 22px;
}
.vb-accordion-twentyfive-title {
padding: 30px;
border-radius: 24px;
background:
linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
border: 1px solid rgba(255,255,255,0.12);
}
.vb-accordion-twentyfive-title span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(34, 197, 94, 0.14);
color: #bbf7d0 !important;
-webkit-text-fill-color: #bbf7d0 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentyfive-title h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 5vw, 74px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.09em;
}
.vb-accordion-twentyfive-title p {
max-width: 700px;
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyfive-metrics {
display: grid;
gap: 12px;
}
.vb-accordion-twentyfive-metrics div {
padding: 22px;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.22);
}
.vb-accordion-twentyfive-metrics strong {
display: block;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
font-size: 42px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-accordion-twentyfive-metrics small {
display: block;
margin-top: 7px;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-twentyfive-list {
display: grid;
gap: 12px;
}
.vb-accordion-twentyfive-item {
overflow: hidden;
border-radius: 22px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}
.vb-accordion-twentyfive-item.is-open {
background: rgba(255,255,255,0.10);
border-color: rgba(34, 197, 94, 0.30);
}
.vb-accordion-twentyfive-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 88px 44px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 86px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentyfive-trigger small {
display: inline-flex;
margin-bottom: 7px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.14);
color: #bfdbfe !important;
-webkit-text-fill-color: #bfdbfe !important;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-twentyfive-trigger strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 21px;
line-height: 1.15;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twentyfive-trigger em {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 9px 12px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.14);
color: #bbf7d0 !important;
-webkit-text-fill-color: #bbf7d0 !important;
font-size: 13px;
font-style: normal;
font-weight: 950;
}
.vb-accordion-twentyfive-trigger i {
position: relative;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
}
.vb-accordion-twentyfive-trigger i::before,
.vb-accordion-twentyfive-trigger i::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #ffffff;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.vb-accordion-twentyfive-trigger i::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentyfive-item.is-open .vb-accordion-twentyfive-trigger i {
background: #22c55e;
}
.vb-accordion-twentyfive-item.is-open .vb-accordion-twentyfive-trigger i::after {
opacity: 0;
}
.vb-accordion-twentyfive-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.vb-accordion-twentyfive-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 22px;
padding: 0 20px 20px;
}
.vb-accordion-twentyfive-content p {
margin: 0 !important;
color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyfive-bars {
display: grid;
gap: 10px;
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.06);
}
.vb-accordion-twentyfive-bars div {
overflow: hidden;
height: 12px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
}
.vb-accordion-twentyfive-bars span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #22c55e, #38bdf8) !important;
}
@media (max-width: 860px) {
.vb-accordion-twentyfive-dashboard,
.vb-accordion-twentyfive-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vb-accordion-twentyfive-demo {
padding: 18px;
border-radius: 22px;
}
.vb-accordion-twentyfive-title {
padding: 22px;
}
.vb-accordion-twentyfive-title h3 {
font-size: 40px !important;
}
.vb-accordion-twentyfive-trigger {
grid-template-columns: 1fr 40px;
}
.vb-accordion-twentyfive-trigger em {
grid-column: 1;
justify-self: start;
}
.vb-accordion-twentyfive-trigger i {
grid-column: 2;
grid-row: 1;
width: 40px;
height: 40px;
}
}
This analytics report accordion is useful for SEO reports, marketing dashboards, client audits, SaaS metrics, performance summaries, traffic reports, and admin analytics interfaces.
26. Mobile App Settings Accordion
A mobile app settings accordion is useful for mobile app landing pages, profile screens, account settings pages, app dashboards, onboarding previews, and product UI sections that need compact expandable settings.
This example looks like a phone screen with segmented settings cards, toggle rows, app-style icons, and multi-open JavaScript behavior. It is intentionally designed as a mobile interface preview instead of a wide website accordion.
- Phone-style app settings accordion
- Multi-open settings behavior
- Toggle controls and icon rows
- Mobile-first visual structure
- Useful for app UI and profile settings sections
Example 26
Mobile App Settings Accordion
Show app settings, privacy controls, notification options, and account preferences inside a phone-like accordion interface.
9:41
App Settings
4 sections available
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentysix]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentysix-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-twentysix-trigger");
const panel = item.querySelector(".vb-accordion-twentysix-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentysix-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-twentysix-demo">
<div class="vb-accordion-twentysix-stage" data-vb-accordion-twentysix>
<div class="vb-accordion-twentysix-copy">
<span>Example 26</span>
<h3>Mobile App Settings Accordion</h3>
<p>Show app settings, privacy controls, notification options, and account preferences inside a phone-like accordion interface.</p>
</div>
<div class="vb-accordion-twentysix-phone">
<div class="vb-accordion-twentysix-status">
<strong>9:41</strong>
<span></span>
</div>
<div class="vb-accordion-twentysix-profile">
<i></i>
<div>
<strong>App Settings</strong>
<small>4 sections available</small>
</div>
</div>
<div class="vb-accordion-twentysix-list">
<section class="vb-accordion-twentysix-item is-open">
<button class="vb-accordion-twentysix-trigger" type="button" aria-expanded="true">
<span class="vb-accordion-twentysix-icon">🔔</span>
<strong>Notifications</strong>
<em></em>
</button>
<div class="vb-accordion-twentysix-panel">
<div class="vb-accordion-twentysix-content">
<label>
<span>Push alerts</span>
<input type="checkbox" checked>
</label>
<label>
<span>Weekly summary</span>
<input type="checkbox">
</label>
</div>
</div>
</section>
<section class="vb-accordion-twentysix-item">
<button class="vb-accordion-twentysix-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentysix-icon">🔒</span>
<strong>Privacy</strong>
<em></em>
</button>
<div class="vb-accordion-twentysix-panel">
<div class="vb-accordion-twentysix-content">
<label>
<span>Hide activity</span>
<input type="checkbox" checked>
</label>
<label>
<span>Personalized content</span>
<input type="checkbox">
</label>
</div>
</div>
</section>
<section class="vb-accordion-twentysix-item">
<button class="vb-accordion-twentysix-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentysix-icon">🎨</span>
<strong>Appearance</strong>
<em></em>
</button>
<div class="vb-accordion-twentysix-panel">
<div class="vb-accordion-twentysix-content">
<label>
<span>Dark mode</span>
<input type="checkbox" checked>
</label>
<label>
<span>Reduce motion</span>
<input type="checkbox">
</label>
</div>
</div>
</section>
<section class="vb-accordion-twentysix-item">
<button class="vb-accordion-twentysix-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentysix-icon">💳</span>
<strong>Billing</strong>
<em></em>
</button>
<div class="vb-accordion-twentysix-panel">
<div class="vb-accordion-twentysix-content">
<label>
<span>Renewal reminders</span>
<input type="checkbox" checked>
</label>
<label>
<span>Email invoices</span>
<input type="checkbox" checked>
</label>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-twentysix-demo,
.vb-accordion-twentysix-demo * {
box-sizing: border-box;
}
.vb-accordion-twentysix-demo {
margin: 28px 0;
padding: 42px;
border-radius: 52px;
background:
radial-gradient(circle at 18% 18%, rgba(244, 114, 182, 0.20), transparent 32%),
radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.20), transparent 34%),
linear-gradient(135deg, #fdf2f8 0%, #eef2ff 52%, #ffffff 100%) !important;
border: 1px solid rgba(244, 114, 182, 0.26);
box-shadow: 0 28px 80px rgba(88, 28, 135, 0.12);
}
.vb-accordion-twentysix-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 34px;
align-items: center;
max-width: 1060px;
margin: 0 auto;
}
.vb-accordion-twentysix-copy {
max-width: 620px;
}
.vb-accordion-twentysix-copy span {
display: inline-flex;
margin-bottom: 16px;
padding: 9px 13px;
border-radius: 999px;
background: #db2777;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentysix-copy h3 {
margin: 0 0 16px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(42px, 5vw, 78px) !important;
line-height: 0.88 !important;
font-weight: 950 !important;
letter-spacing: -0.095em;
}
.vb-accordion-twentysix-copy p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.8;
font-weight: 650;
}
.vb-accordion-twentysix-phone {
position: relative;
overflow: hidden;
min-height: 710px;
padding: 18px;
border-radius: 42px;
background: #111827;
border: 10px solid #020617;
box-shadow:
0 36px 90px rgba(15, 23, 42, 0.28),
inset 0 0 0 1px rgba(255,255,255,0.08);
}
.vb-accordion-twentysix-phone::before {
content: "";
position: absolute;
left: 50%;
top: 10px;
width: 98px;
height: 24px;
border-radius: 0 0 18px 18px;
background: #020617;
transform: translateX(-50%);
z-index: 3;
}
.vb-accordion-twentysix-status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 16px 14px;
color: #ffffff;
}
.vb-accordion-twentysix-status strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 950;
}
.vb-accordion-twentysix-status span {
width: 54px;
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, #ffffff 0 36%, rgba(255,255,255,0.42) 36% 62%, rgba(255,255,255,0.24) 62% 100%) !important;
}
.vb-accordion-twentysix-profile {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 14px;
align-items: center;
margin: 10px 0 16px;
padding: 16px;
border-radius: 28px;
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,0.18), transparent 36%),
linear-gradient(135deg, #db2777, #6366f1) !important;
}
.vb-accordion-twentysix-profile i {
width: 58px;
height: 58px;
border-radius: 20px;
background:
radial-gradient(circle at 32% 28%, #ffffff 0 12px, transparent 13px),
linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16)) !important;
border: 1px solid rgba(255,255,255,0.20);
}
.vb-accordion-twentysix-profile strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px;
line-height: 1.1;
font-weight: 950;
letter-spacing: -0.055em;
}
.vb-accordion-twentysix-profile small {
display: block;
margin-top: 5px;
color: #fce7f3 !important;
-webkit-text-fill-color: #fce7f3 !important;
font-size: 13px;
font-weight: 800;
}
.vb-accordion-twentysix-list {
display: grid;
gap: 11px;
}
.vb-accordion-twentysix-item {
overflow: hidden;
border-radius: 24px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.09);
}
.vb-accordion-twentysix-item.is-open {
background: rgba(255,255,255,0.12);
border-color: rgba(244, 114, 182, 0.34);
}
.vb-accordion-twentysix-trigger {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 36px;
align-items: center;
gap: 12px;
width: 100%;
min-height: 72px;
padding: 14px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentysix-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 16px;
background: rgba(255,255,255,0.10);
font-size: 20px;
}
.vb-accordion-twentysix-trigger strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 17px;
line-height: 1.2;
font-weight: 900;
}
.vb-accordion-twentysix-trigger em {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
}
.vb-accordion-twentysix-trigger em::before,
.vb-accordion-twentysix-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: #ffffff;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease;
}
.vb-accordion-twentysix-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentysix-item.is-open .vb-accordion-twentysix-trigger em {
background: #db2777;
}
.vb-accordion-twentysix-item.is-open .vb-accordion-twentysix-trigger em::after {
opacity: 0;
}
.vb-accordion-twentysix-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twentysix-content {
display: grid;
gap: 8px;
padding: 0 14px 14px 72px;
}
.vb-accordion-twentysix-content label {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255,255,255,0.07);
}
.vb-accordion-twentysix-content label span {
color: #e5e7eb !important;
-webkit-text-fill-color: #e5e7eb !important;
font-size: 13px;
font-weight: 800;
}
.vb-accordion-twentysix-content input {
appearance: none;
position: relative;
width: 44px;
height: 26px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
cursor: pointer;
}
.vb-accordion-twentysix-content input::before {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 999px;
background: #ffffff;
transition: transform 0.2s ease;
}
.vb-accordion-twentysix-content input:checked {
background: #ec4899;
}
.vb-accordion-twentysix-content input:checked::before {
transform: translateX(18px);
}
@media (max-width: 860px) {
.vb-accordion-twentysix-stage {
grid-template-columns: 1fr;
}
.vb-accordion-twentysix-phone {
max-width: 380px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 520px) {
.vb-accordion-twentysix-demo {
padding: 18px;
border-radius: 34px;
}
.vb-accordion-twentysix-copy h3 {
font-size: 40px !important;
}
.vb-accordion-twentysix-phone {
min-height: 680px;
border-width: 7px;
border-radius: 36px;
}
}
This mobile app settings accordion is useful for mobile app landing pages, user account screens, app dashboards, profile settings, privacy settings, notification controls, and mobile-first UI examples.
27. File Upload Accordion
A file upload accordion is useful for dashboards, document portals, onboarding forms, client areas, support ticket pages, job application forms, and admin panels where users need to upload different types of files in a structured way.
This example uses a document-upload layout with dashed drop zones, upload status chips, file type labels, and one-open-at-a-time JavaScript behavior. The design is intentionally different from normal FAQ accordions because it feels like a practical file management interface.
- File upload accordion layout
- One-open-at-a-time behavior
- Upload zones and file type labels
- Status chips and document rows
- Useful for portals, forms, and dashboards
Example 27
File Upload Accordion
Organize upload requirements into expandable document sections with clear file status and upload instructions.
6
Files needed
3
Uploaded
Drop files here
Accepted formats: PDF, JPG, PNG. Maximum file size: 10 MB.
Upload signed form
Use this section for signed contracts, application forms, consent files, or scanned paperwork.
Add visual references
Upload screenshots, examples, product images, design references, or visual notes for the project.
Upload ZIP archive
Use ZIP files for grouped assets, code folders, design files, exported documents, or larger file packages.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentyseven]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentyseven-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-twentyseven-trigger");
const panel = item.querySelector(".vb-accordion-twentyseven-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-twentyseven-trigger");
const panel = item.querySelector(".vb-accordion-twentyseven-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentyseven-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-twentyseven-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twentyseven-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-twentyseven-demo">
<div class="vb-accordion-twentyseven-uploader" data-vb-accordion-twentyseven>
<div class="vb-accordion-twentyseven-side">
<span>Example 27</span>
<h3>File Upload Accordion</h3>
<p>Organize upload requirements into expandable document sections with clear file status and upload instructions.</p>
<div class="vb-accordion-twentyseven-summary">
<div>
<strong>6</strong>
<small>Files needed</small>
</div>
<div>
<strong>3</strong>
<small>Uploaded</small>
</div>
</div>
</div>
<div class="vb-accordion-twentyseven-stack">
<section class="vb-accordion-twentyseven-item is-open">
<button class="vb-accordion-twentyseven-trigger" type="button" aria-expanded="true">
<span class="vb-accordion-twentyseven-docicon">PDF</span>
<span>
<strong>Identity documents</strong>
<small>Passport, ID card, or driver license</small>
</span>
<em>Required</em>
<i></i>
</button>
<div class="vb-accordion-twentyseven-panel">
<div class="vb-accordion-twentyseven-content">
<div class="vb-accordion-twentyseven-drop">
<strong>Drop files here</strong>
<p>Accepted formats: PDF, JPG, PNG. Maximum file size: 10 MB.</p>
<button type="button">Choose file</button>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyseven-item">
<button class="vb-accordion-twentyseven-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentyseven-docicon">DOC</span>
<span>
<strong>Application form</strong>
<small>Signed form or completed document</small>
</span>
<em>Pending</em>
<i></i>
</button>
<div class="vb-accordion-twentyseven-panel">
<div class="vb-accordion-twentyseven-content">
<div class="vb-accordion-twentyseven-drop">
<strong>Upload signed form</strong>
<p>Use this section for signed contracts, application forms, consent files, or scanned paperwork.</p>
<button type="button">Choose file</button>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyseven-item">
<button class="vb-accordion-twentyseven-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentyseven-docicon">IMG</span>
<span>
<strong>Project images</strong>
<small>Screenshots, references, or photos</small>
</span>
<em>Optional</em>
<i></i>
</button>
<div class="vb-accordion-twentyseven-panel">
<div class="vb-accordion-twentyseven-content">
<div class="vb-accordion-twentyseven-drop">
<strong>Add visual references</strong>
<p>Upload screenshots, examples, product images, design references, or visual notes for the project.</p>
<button type="button">Choose file</button>
</div>
</div>
</div>
</section>
<section class="vb-accordion-twentyseven-item">
<button class="vb-accordion-twentyseven-trigger" type="button" aria-expanded="false">
<span class="vb-accordion-twentyseven-docicon">ZIP</span>
<span>
<strong>Supporting archive</strong>
<small>Compressed project files</small>
</span>
<em>Ready</em>
<i></i>
</button>
<div class="vb-accordion-twentyseven-panel">
<div class="vb-accordion-twentyseven-content">
<div class="vb-accordion-twentyseven-drop">
<strong>Upload ZIP archive</strong>
<p>Use ZIP files for grouped assets, code folders, design files, exported documents, or larger file packages.</p>
<button type="button">Choose file</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.vb-accordion-twentyseven-demo,
.vb-accordion-twentyseven-demo * {
box-sizing: border-box;
}
.vb-accordion-twentyseven-demo {
margin: 28px 0;
padding: 42px;
border-radius: 18px 70px 18px 70px;
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.14), transparent 34%),
linear-gradient(315deg, rgba(249, 115, 22, 0.14), transparent 38%),
linear-gradient(135deg, #f8fafc 0%, #fff7ed 52%, #ffffff 100%) !important;
border: 1px solid rgba(249, 115, 22, 0.24);
box-shadow: 0 28px 80px rgba(124, 45, 18, 0.11);
}
.vb-accordion-twentyseven-uploader {
display: grid;
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
gap: 28px;
max-width: 1120px;
margin: 0 auto;
align-items: start;
}
.vb-accordion-twentyseven-side {
padding: 30px;
border-radius: 14px 46px 14px 46px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22), transparent 36%),
linear-gradient(135deg, #0f172a, #0f766e 55%, #f97316) !important;
box-shadow: 0 30px 86px rgba(15, 23, 42, 0.22);
}
.vb-accordion-twentyseven-side > span {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.18);
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentyseven-side h3 {
margin: 0 0 14px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 5vw, 68px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.09em;
}
.vb-accordion-twentyseven-side p {
margin: 0 0 24px !important;
color: #ccfbf1 !important;
-webkit-text-fill-color: #ccfbf1 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyseven-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.vb-accordion-twentyseven-summary div {
padding: 18px;
border-radius: 20px 8px 20px 8px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.18);
}
.vb-accordion-twentyseven-summary strong {
display: block;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 34px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.06em;
}
.vb-accordion-twentyseven-summary small {
display: block;
margin-top: 6px;
color: #ffedd5 !important;
-webkit-text-fill-color: #ffedd5 !important;
font-size: 12px;
font-weight: 850;
}
.vb-accordion-twentyseven-stack {
display: grid;
gap: 13px;
}
.vb-accordion-twentyseven-item {
overflow: hidden;
border-radius: 26px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
.vb-accordion-twentyseven-item.is-open {
border-color: rgba(249, 115, 22, 0.36);
box-shadow: 0 26px 70px rgba(249, 115, 22, 0.13);
}
.vb-accordion-twentyseven-trigger {
display: grid;
grid-template-columns: 62px minmax(0, 1fr) 86px 42px;
gap: 14px;
align-items: center;
width: 100%;
min-height: 86px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentyseven-docicon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 18px 18px 6px 18px;
background: #fff7ed;
color: #c2410c !important;
-webkit-text-fill-color: #c2410c !important;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.08em;
}
.vb-accordion-twentyseven-trigger strong {
display: block;
margin-bottom: 5px;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 19px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.04em;
}
.vb-accordion-twentyseven-trigger small {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 13px;
font-weight: 750;
}
.vb-accordion-twentyseven-trigger em {
justify-self: end;
padding: 8px 10px;
border-radius: 999px;
background: #ecfeff;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 11px;
font-style: normal;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.vb-accordion-twentyseven-trigger i {
position: relative;
width: 42px;
height: 42px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.22);
}
.vb-accordion-twentyseven-trigger i::before,
.vb-accordion-twentyseven-trigger i::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #c2410c;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease;
}
.vb-accordion-twentyseven-trigger i::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentyseven-item.is-open .vb-accordion-twentyseven-trigger i {
background: #f97316;
border-color: #f97316;
}
.vb-accordion-twentyseven-item.is-open .vb-accordion-twentyseven-trigger i::before,
.vb-accordion-twentyseven-item.is-open .vb-accordion-twentyseven-trigger i::after {
background: #ffffff;
}
.vb-accordion-twentyseven-item.is-open .vb-accordion-twentyseven-trigger i::after {
opacity: 0;
}
.vb-accordion-twentyseven-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.vb-accordion-twentyseven-content {
padding: 0 20px 20px 96px;
}
.vb-accordion-twentyseven-drop {
padding: 22px;
border-radius: 20px;
background: #fff7ed;
border: 2px dashed rgba(249, 115, 22, 0.46);
}
.vb-accordion-twentyseven-drop strong {
display: block;
margin-bottom: 8px;
color: #7c2d12 !important;
-webkit-text-fill-color: #7c2d12 !important;
font-size: 18px;
font-weight: 950;
}
.vb-accordion-twentyseven-drop p {
margin: 0 0 16px !important;
color: #9a3412 !important;
-webkit-text-fill-color: #9a3412 !important;
font-size: 14px;
line-height: 1.65;
font-weight: 650;
}
.vb-accordion-twentyseven-drop button {
min-height: 42px;
padding: 10px 16px;
border: 0;
border-radius: 12px;
background: #0f172a;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 900px) {
.vb-accordion-twentyseven-uploader {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.vb-accordion-twentyseven-demo {
padding: 18px;
border-radius: 14px 44px 14px 44px;
}
.vb-accordion-twentyseven-side {
padding: 24px;
}
.vb-accordion-twentyseven-side h3 {
font-size: 40px !important;
}
.vb-accordion-twentyseven-trigger {
grid-template-columns: 54px minmax(0, 1fr) 40px;
padding: 16px;
}
.vb-accordion-twentyseven-docicon {
width: 54px;
height: 54px;
}
.vb-accordion-twentyseven-trigger em {
grid-column: 2;
justify-self: start;
}
.vb-accordion-twentyseven-trigger i {
grid-column: 3;
grid-row: 1;
width: 40px;
height: 40px;
}
.vb-accordion-twentyseven-content {
padding: 0 16px 16px;
}
}
This file upload accordion is useful for onboarding portals, client dashboards, support forms, application forms, document upload pages, admin panels, and secure account areas.
28. Real Estate Listing Accordion
A real estate listing accordion is useful for property pages, apartment listings, booking websites, rental platforms, real estate landing pages, and neighborhood guides where property details should be compact but easy to explore.
This example uses a property-listing style with a visual property card, room statistics, price badge, amenity rows, and multi-open JavaScript behavior. It looks like a real estate interface rather than a generic web accordion.
- Real estate listing accordion layout
- Multi-open property detail behavior
- Property image placeholder and price card
- Amenity and location detail rows
- Useful for property, rental, and booking websites
Example 28
Modern City Apartment
From
€1,250
per month
Real Estate Listing Accordion
Open listing details, amenities, location notes, and booking information inside a property-style accordion.
3Rooms
86m²Area
7thFloor
A bright apartment with an open living area, modern kitchen, private balcony, and practical storage space.
- Underground parking
- High-speed internet
- Private balcony
- Storage room
The property is close to public transport, grocery stores, restaurants, parks, schools, and main city routes.
Use this section for viewing times, booking instructions, agent contact details, and application requirements.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentyeight]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentyeight-item"));
function updateItem(item) {
const button = item.querySelector(".vb-accordion-twentyeight-trigger");
const panel = item.querySelector(".vb-accordion-twentyeight-panel");
const isOpen = item.classList.contains("is-open");
button.setAttribute("aria-expanded", isOpen ? "true" : "false");
panel.style.maxHeight = isOpen ? panel.scrollHeight + "px" : "0px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentyeight-trigger");
button.addEventListener("click", function () {
item.classList.toggle("is-open");
updateItem(item);
});
updateItem(item);
});
window.addEventListener("resize", function () {
items.forEach(updateItem);
});
})();
HTML
<div class="vb-accordion-twentyeight-demo">
<div class="vb-accordion-twentyeight-property" data-vb-accordion-twentyeight>
<div class="vb-accordion-twentyeight-visual">
<div class="vb-accordion-twentyeight-photo">
<span>Example 28</span>
<strong>Modern City Apartment</strong>
</div>
<div class="vb-accordion-twentyeight-price">
<span>From</span>
<strong>€1,250</strong>
<small>per month</small>
</div>
</div>
<div class="vb-accordion-twentyeight-details">
<div class="vb-accordion-twentyeight-heading">
<h3>Real Estate Listing Accordion</h3>
<p>Open listing details, amenities, location notes, and booking information inside a property-style accordion.</p>
</div>
<div class="vb-accordion-twentyeight-stats">
<div><strong>3</strong><small>Rooms</small></div>
<div><strong>86m²</strong><small>Area</small></div>
<div><strong>7th</strong><small>Floor</small></div>
</div>
<div class="vb-accordion-twentyeight-list">
<section class="vb-accordion-twentyeight-item is-open">
<button class="vb-accordion-twentyeight-trigger" type="button" aria-expanded="true">
<span>Property overview</span>
<em></em>
</button>
<div class="vb-accordion-twentyeight-panel">
<div class="vb-accordion-twentyeight-content">
<p>A bright apartment with an open living area, modern kitchen, private balcony, and practical storage space.</p>
</div>
</div>
</section>
<section class="vb-accordion-twentyeight-item">
<button class="vb-accordion-twentyeight-trigger" type="button" aria-expanded="false">
<span>Amenities included</span>
<em></em>
</button>
<div class="vb-accordion-twentyeight-panel">
<div class="vb-accordion-twentyeight-content">
<ul>
<li>Underground parking</li>
<li>High-speed internet</li>
<li>Private balcony</li>
<li>Storage room</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-twentyeight-item">
<button class="vb-accordion-twentyeight-trigger" type="button" aria-expanded="false">
<span>Location details</span>
<em></em>
</button>
<div class="vb-accordion-twentyeight-panel">
<div class="vb-accordion-twentyeight-content">
<p>The property is close to public transport, grocery stores, restaurants, parks, schools, and main city routes.</p>
</div>
</div>
</section>
<section class="vb-accordion-twentyeight-item">
<button class="vb-accordion-twentyeight-trigger" type="button" aria-expanded="false">
<span>Viewing and booking</span>
<em></em>
</button>
<div class="vb-accordion-twentyeight-panel">
<div class="vb-accordion-twentyeight-content">
<p>Use this section for viewing times, booking instructions, agent contact details, and application requirements.</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
CSS
.vb-accordion-twentyeight-demo,
.vb-accordion-twentyeight-demo * {
box-sizing: border-box;
}
.vb-accordion-twentyeight-demo {
margin: 28px 0;
padding: 40px;
border-radius: 12px 12px 64px 64px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.16), transparent 34%),
linear-gradient(315deg, rgba(120, 113, 108, 0.14), transparent 38%),
linear-gradient(135deg, #f5f5f4 0%, #ecfeff 52%, #ffffff 100%) !important;
border: 1px solid rgba(20, 184, 166, 0.24);
box-shadow: 0 28px 80px rgba(19, 78, 74, 0.11);
}
.vb-accordion-twentyeight-property {
display: grid;
grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
gap: 26px;
max-width: 1120px;
margin: 0 auto;
align-items: stretch;
}
.vb-accordion-twentyeight-visual {
display: grid;
gap: 16px;
}
.vb-accordion-twentyeight-photo {
position: relative;
min-height: 500px;
overflow: hidden;
padding: 28px;
border-radius: 12px 46px 12px 46px;
background:
linear-gradient(90deg, rgba(255,255,255,0.24) 1px, transparent 1px),
linear-gradient(0deg, rgba(255,255,255,0.18) 1px, transparent 1px),
radial-gradient(circle at 26% 20%, rgba(255,255,255,0.36), transparent 30%),
linear-gradient(135deg, #134e4a, #0f766e 52%, #99f6e4) !important;
background-size: 34px 34px, 34px 34px, auto, auto !important;
box-shadow: 0 30px 88px rgba(15, 118, 110, 0.20);
}
.vb-accordion-twentyeight-photo::before {
content: "";
position: absolute;
left: 70px;
right: 70px;
bottom: 90px;
height: 170px;
border-radius: 12px 12px 0 0;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.24);
}
.vb-accordion-twentyeight-photo::after {
content: "";
position: absolute;
left: 112px;
right: 112px;
bottom: 90px;
height: 110px;
background:
linear-gradient(90deg, rgba(255,255,255,0.36) 1px, transparent 1px),
linear-gradient(0deg, rgba(255,255,255,0.28) 1px, transparent 1px);
background-size: 34px 34px;
}
.vb-accordion-twentyeight-photo span {
position: relative;
z-index: 2;
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
color: #ecfeff !important;
-webkit-text-fill-color: #ecfeff !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vb-accordion-twentyeight-photo strong {
position: absolute;
left: 28px;
right: 28px;
bottom: 28px;
z-index: 2;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(34px, 5vw, 58px);
line-height: 0.94;
font-weight: 950;
letter-spacing: -0.08em;
}
.vb-accordion-twentyeight-price {
display: grid;
grid-template-columns: 1fr;
padding: 22px;
border-radius: 32px 8px 32px 8px;
background: #ffffff;
border: 1px solid rgba(20, 184, 166, 0.20);
box-shadow: 0 18px 48px rgba(15, 118, 110, 0.10);
}
.vb-accordion-twentyeight-price span {
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 12px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vb-accordion-twentyeight-price strong {
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 48px;
line-height: 1;
font-weight: 950;
letter-spacing: -0.085em;
}
.vb-accordion-twentyeight-price small {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 13px;
font-weight: 850;
}
.vb-accordion-twentyeight-details {
align-self: center;
}
.vb-accordion-twentyeight-heading {
margin-bottom: 20px;
}
.vb-accordion-twentyeight-heading h3 {
margin: 0 0 12px !important;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: clamp(40px, 5vw, 70px) !important;
line-height: 0.9 !important;
font-weight: 950 !important;
letter-spacing: -0.09em;
}
.vb-accordion-twentyeight-heading p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 16px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyeight-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
margin-bottom: 16px;
}
.vb-accordion-twentyeight-stats div {
padding: 16px;
border-radius: 20px 20px 6px 20px;
background: #ffffff;
border: 1px solid rgba(20, 184, 166, 0.18);
}
.vb-accordion-twentyeight-stats strong {
display: block;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 26px;
line-height: 1;
font-weight: 950;
}
.vb-accordion-twentyeight-stats small {
display: block;
margin-top: 5px;
color: #64748b !important;
-webkit-text-fill-color: #64748b !important;
font-size: 12px;
font-weight: 850;
}
.vb-accordion-twentyeight-list {
display: grid;
gap: 12px;
}
.vb-accordion-twentyeight-item {
overflow: hidden;
border-radius: 24px 24px 8px 24px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
}
.vb-accordion-twentyeight-item.is-open {
border-color: rgba(20, 184, 166, 0.34);
box-shadow: 0 24px 64px rgba(20, 184, 166, 0.12);
}
.vb-accordion-twentyeight-trigger {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px;
align-items: center;
gap: 16px;
width: 100%;
min-height: 74px;
padding: 18px 20px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.vb-accordion-twentyeight-trigger span {
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
font-size: 20px;
line-height: 1.2;
font-weight: 950;
letter-spacing: -0.045em;
}
.vb-accordion-twentyeight-trigger em {
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
background: #ccfbf1;
}
.vb-accordion-twentyeight-trigger em::before,
.vb-accordion-twentyeight-trigger em::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 2px;
border-radius: 999px;
background: #0f766e;
transform: translate(-50%, -50%);
transition: opacity 0.22s ease;
}
.vb-accordion-twentyeight-trigger em::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.vb-accordion-twentyeight-item.is-open .vb-accordion-twentyeight-trigger em {
background: #0f766e;
}
.vb-accordion-twentyeight-item.is-open .vb-accordion-twentyeight-trigger em::before,
.vb-accordion-twentyeight-item.is-open .vb-accordion-twentyeight-trigger em::after {
background: #ffffff;
}
.vb-accordion-twentyeight-item.is-open .vb-accordion-twentyeight-trigger em::after {
opacity: 0;
}
.vb-accordion-twentyeight-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.vb-accordion-twentyeight-content {
padding: 0 20px 20px;
}
.vb-accordion-twentyeight-content p {
margin: 0 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-size: 15px;
line-height: 1.75;
font-weight: 650;
}
.vb-accordion-twentyeight-content ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vb-accordion-twentyeight-content li {
margin: 0 !important;
padding: 12px;
border-radius: 16px;
background: #f0fdfa;
color: #0f766e !important;
-webkit-text-fill-color: #0f766e !important;
font-size: 13px;
font-weight: 850;
}
@media (max-width: 900px) {
.vb-accordion-twentyeight-property {
grid-template-columns: 1fr;
}
.vb-accordion-twentyeight-photo {
min-height: 420px;
}
}
@media (max-width: 640px) {
.vb-accordion-twentyeight-demo {
padding: 18px;
border-radius: 10px 10px 42px 42px;
}
.vb-accordion-twentyeight-photo {
min-height: 360px;
padding: 22px;
}
.vb-accordion-twentyeight-photo strong {
left: 22px;
right: 22px;
bottom: 22px;
font-size: 38px;
}
.vb-accordion-twentyeight-heading h3 {
font-size: 38px !important;
}
.vb-accordion-twentyeight-stats,
.vb-accordion-twentyeight-content ul {
grid-template-columns: 1fr;
}
}
This real estate listing accordion is useful for apartment listings, property websites, rental platforms, real estate landing pages, booking pages, accommodation websites, and location-based service pages.
29. Pricing Add-On Accordion
A pricing add-on accordion is useful for SaaS pricing pages, checkout pages, subscription plans, hosting packages, plugin pricing, service bundles, and product upsell sections where optional extras need to be explained clearly.
This example uses a checkout-inspired layout with add-on cards, price pills, selected states, a total summary, and one-open-at-a-time JavaScript behavior. It is designed like a pricing configurator instead of a standard FAQ accordion.
- Pricing add-on accordion layout
- One-open-at-a-time behavior
- Price pills and selected add-on states
- Checkout summary visual card
- Useful for pricing, checkout, and upgrade pages
Example 29
Pricing Add-On Accordion
Let users expand add-ons, compare upgrade details, and understand what each extra feature includes.
Current plan
€29/mo
3 add-ons available
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-twentynine]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-twentynine-item"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-twentynine-trigger");
const panel = item.querySelector(".vb-accordion-twentynine-content-wrap");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-twentynine-trigger");
const panel = item.querySelector(".vb-accordion-twentynine-content-wrap");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-twentynine-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
const defaultItem = accordion.querySelector(".vb-accordion-twentynine-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-twentynine-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-twentynine-demo">
<div class="vb-accordion-twentynine-pricing" data-vb-accordion-twentynine>
<div class="vb-accordion-twentynine-panel">
<span>Example 29</span>
<h3>Pricing Add-On Accordion</h3>
<p>Let users expand add-ons, compare upgrade details, and understand what each extra feature includes.</p>
<div class="vb-accordion-twentynine-total">
<small>Current plan</small>
<strong>€29/mo</strong>
<em>3 add-ons available</em>
</div>
</div>
<div class="vb-accordion-twentynine-options">
<section class="vb-accordion-twentynine-item is-open">
<button class="vb-accordion-twentynine-trigger" type="button" aria-expanded="true">
<span>
<small>Popular add-on</small>
<strong>Priority Support</strong>
</span>
<em>+€9/mo</em>
<i></i>
</button>
<div class="vb-accordion-twentynine-content-wrap">
<div class="vb-accordion-twentynine-content">
<p>Get faster replies, priority issue handling, and direct help for implementation questions.</p>
<ul>
<li>Faster support queue</li>
<li>Implementation guidance</li>
<li>Best for client projects</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-twentynine-item">
<button class="vb-accordion-twentynine-trigger" type="button" aria-expanded="false">
<span>
<small>Automation</small>
<strong>Advanced Workflows</strong>
</span>
<em>+€14/mo</em>
<i></i>
</button>
<div class="vb-accordion-twentynine-content-wrap">
<div class="vb-accordion-twentynine-content">
<p>Add automation rules, conditional logic, scheduled actions, and reusable workflow templates.</p>
<ul>
<li>Smart automation rules</li>
<li>Scheduled workflows</li>
<li>Reusable templates</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-twentynine-item">
<button class="vb-accordion-twentynine-trigger" type="button" aria-expanded="false">
<span>
<small>Storage</small>
<strong>Extra File Storage</strong>
</span>
<em>+€6/mo</em>
<i></i>
</button>
<div class="vb-accordion-twentynine-content-wrap">
<div class="vb-accordion-twentynine-content">
<p>Increase upload storage for documents, images, exports, client assets, and generated files.</p>
<ul>
<li>More file space</li>
<li>Better for teams</li>
<li>Useful for document portals</li>
</ul>
</div>
</div>
</section>
<section class="vb-accordion-twentynine-item">
<button class="vb-accordion-twentynine-trigger" type="button" aria-expanded="false">
<span>
<small>Branding</small>
<strong>White Label Mode</strong>
</span>
<em>+€19/mo</em>
<i></i>
</button>
<div class="vb-accordion-twentynine-content-wrap">
<div class="vb-accordion-twentynine-content">
<p>Remove platform branding, add custom colors, upload your logo, and create a more client-ready experience.</p>
<ul>
<li>Custom branding</li>
<li>Client-ready interface</li>
<li>Agency-friendly setup</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
/* CSS is included in the live preview above. Copy the full CSS from the live preview block if you want this as a standalone component. */
This pricing add-on accordion is useful for SaaS pricing pages, checkout upgrades, subscription plans, hosting add-ons, plugin licenses, ecommerce bundles, and service package pages.
30. Complete Responsive Accordion Section
A complete responsive accordion section is useful when a page needs a polished final accordion block with intro text, category tabs, expandable answers, visual cards, call-to-action buttons, and a layout that works across desktop, tablet, and mobile screens.
This final example combines a full landing-page section layout with category buttons, one-open-at-a-time accordion behavior, a side visual panel, and responsive styling. It is designed as a complete website section rather than a small standalone component.
- Complete responsive accordion section
- Category buttons and expandable answers
- One-open-at-a-time JavaScript behavior
- Side visual panel and CTA buttons
- Useful for landing pages, FAQ sections, and service pages
Example 30
Complete Responsive Accordion Section
Build a polished accordion section with category navigation, expandable answers, supporting visuals, and responsive layout behavior.
You can use this section for FAQ pages, service pages, SaaS landing pages, product pages, support sections, onboarding pages, or documentation introductions.
Yes. The layout changes from a two-column section to a single-column structure, while spacing, buttons, and panels stay readable on small screens.
Yes, if each accordion uses scoped class names and a unique data attribute. This keeps JavaScript selectors from conflicting with other examples.
JavaScript gives better control over ARIA states, one-open-at-a-time behavior, dynamic heights, resize updates, and more advanced UI logic.
JavaScript
(function () {
const accordion = document.querySelector("[data-vb-accordion-thirty]");
if (!accordion) return;
const items = Array.from(accordion.querySelectorAll(".vb-accordion-thirty-item"));
const tabs = Array.from(accordion.querySelectorAll(".vb-accordion-thirty-tabs button"));
function closeItem(item) {
const button = item.querySelector(".vb-accordion-thirty-trigger");
const panel = item.querySelector(".vb-accordion-thirty-panel");
item.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
panel.style.maxHeight = "0px";
}
function openItem(item) {
const button = item.querySelector(".vb-accordion-thirty-trigger");
const panel = item.querySelector(".vb-accordion-thirty-panel");
item.classList.add("is-open");
button.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
items.forEach(function (item) {
const button = item.querySelector(".vb-accordion-thirty-trigger");
button.addEventListener("click", function () {
const isOpen = item.classList.contains("is-open");
items.forEach(closeItem);
if (!isOpen) {
openItem(item);
}
});
});
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
tabs.forEach(function (button) {
button.classList.remove("is-active");
});
tab.classList.add("is-active");
});
});
const defaultItem = accordion.querySelector(".vb-accordion-thirty-item.is-open");
if (defaultItem) {
openItem(defaultItem);
}
window.addEventListener("resize", function () {
const open = accordion.querySelector(".vb-accordion-thirty-item.is-open");
if (open) {
openItem(open);
}
});
})();
HTML
<div class="vb-accordion-thirty-demo">
<div class="vb-accordion-thirty-section" data-vb-accordion-thirty>
<div class="vb-accordion-thirty-main">
<div class="vb-accordion-thirty-kicker">Example 30</div>
<h3>Complete Responsive Accordion Section</h3>
<p class="vb-accordion-thirty-lead">Build a polished accordion section with category navigation, expandable answers, supporting visuals, and responsive layout behavior.</p>
<div class="vb-accordion-thirty-tabs">
<button type="button" class="is-active">General</button>
<button type="button">Design</button>
<button type="button">Code</button>
</div>
<div class="vb-accordion-thirty-list">
<section class="vb-accordion-thirty-item is-open">
<button class="vb-accordion-thirty-trigger" type="button" aria-expanded="true">
<span>How can I use this accordion section?</span>
<em></em>
</button>
<div class="vb-accordion-thirty-panel">
<div class="vb-accordion-thirty-content">
<p>You can use this section for FAQ pages, service pages, SaaS landing pages, product pages, support sections, onboarding pages, or documentation introductions.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirty-item">
<button class="vb-accordion-thirty-trigger" type="button" aria-expanded="false">
<span>Does it work on mobile screens?</span>
<em></em>
</button>
<div class="vb-accordion-thirty-panel">
<div class="vb-accordion-thirty-content">
<p>Yes. The layout changes from a two-column section to a single-column structure, while spacing, buttons, and panels stay readable on small screens.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirty-item">
<button class="vb-accordion-thirty-trigger" type="button" aria-expanded="false">
<span>Can I place multiple accordions on one page?</span>
<em></em>
</button>
<div class="vb-accordion-thirty-panel">
<div class="vb-accordion-thirty-content">
<p>Yes, if each accordion uses scoped class names and a unique data attribute. This keeps JavaScript selectors from conflicting with other examples.</p>
</div>
</div>
</section>
<section class="vb-accordion-thirty-item">
<button class="vb-accordion-thirty-trigger" type="button" aria-expanded="false">
<span>Why use JavaScript instead of only CSS?</span>
<em></em>
</button>
<div class="vb-accordion-thirty-panel">
<div class="vb-accordion-thirty-content">
<p>JavaScript gives better control over ARIA states, one-open-at-a-time behavior, dynamic heights, resize updates, and more advanced UI logic.</p>
</div>
</div>
</section>
</div>
<div class="vb-accordion-thirty-actions">
<a href="#javascript-accordion-examples">View examples</a>
<a href="#accordion-best-practices">Best practices</a>
</div>
</div>
<aside class="vb-accordion-thirty-card">
<div class="vb-accordion-thirty-window">
<span></span>
<span></span>
<span></span>
</div>
<div class="vb-accordion-thirty-preview">
<div></div>
<div></div>
<div></div>
</div>
<div class="vb-accordion-thirty-score">
<strong>30</strong>
<span>Accordion examples completed</span>
</div>
</aside>
</div>
</div>
CSS
/* CSS is included in the live preview above. Copy the full CSS from the live preview block if you want this as a standalone component. */
This complete responsive accordion section is useful for landing pages, FAQ sections, SaaS websites, service pages, product pages, support pages, onboarding sections, and documentation pages that need a complete polished accordion layout.
JavaScript Accordion Best Practices
JavaScript accordions work best when they make a page easier to scan without hiding information users need immediately. A strong accordion component should have clear clickable headers, readable expanded content, visible active states, smooth open and close behavior, and responsive spacing that works on desktop, tablet, and mobile screens.
For business websites, FAQ pages, ecommerce product pages, service pages, SaaS landing pages, dashboards, documentation sections, and support pages, accordions are useful because they organize long content into smaller sections. The goal is not to add animation for decoration, but to help visitors find the right answer, feature, setting, product detail, or pricing information faster.
Use clear accordion labels
Each accordion header should describe exactly what users will find inside, such as shipping details, pricing questions, product specs, setup steps, or support answers.
Make the whole header clickable
Users should not need to click a tiny icon. Make the full question, title, or accordion row clickable for a better desktop and mobile experience.
Show a strong open state
The active accordion item should stand out with a different border, background, icon state, shadow, or label style.
Use real button elements
Accordion triggers should be buttons, not random divs, because buttons are easier to use with keyboards and assistive technologies.
Keep JavaScript scoped
Use a unique wrapper and class names so multiple accordions can work on the same page without CSS or JavaScript conflicts.
Test long real content
Real FAQ answers, product descriptions, documentation text, and pricing notes are often much longer than demo text, so test with realistic content.
For most FAQ sections and landing pages, one-open-at-a-time behavior is a good choice because it keeps the page compact. For dashboards, documentation, product details, course modules, and settings panels, multi-open behavior can be better because users may want to compare several open sections at once.
- Use one-open-at-a-time accordions for FAQs, pricing questions, service pages, and short support sections.
- Use multi-open accordions for documentation, dashboards, product details, settings, and comparison-style content.
- Use clear icons such as plus/minus, chevrons, arrows, labels, badges, or active indicators.
- Keep animations short so the accordion feels fast and professional.
- Use enough spacing inside expanded panels so answers, lists, and product details are easy to read.
- Do not hide important conversion information if users need it before clicking a button or making a decision.
Responsive Accordion Design Tips
Responsive accordion design matters because accordions are often used to simplify mobile pages. A long FAQ section, product information block, checkout help area, documentation menu, or dashboard settings page can feel much cleaner when the content is grouped into expandable sections.
On mobile screens, accordion rows should be easy to tap, headings should remain readable, icons should not disappear, and expanded content should not become too narrow. If the accordion includes columns, cards, images, pricing details, tables, or statistics, stack those elements vertically on smaller screens.
Desktop layout
Use wider accordion sections, side visuals, comparison blocks, pricing panels, and richer card layouts when there is enough space.
Tablet layout
Reduce complex columns, keep accordion titles readable, and make sure expanded content does not feel squeezed.
Mobile layout
Stack everything, increase tap areas, keep icons visible, and make sure every answer or content panel has comfortable spacing.
- Use large tap targets so visitors can open accordion rows easily on mobile.
- Avoid tiny icons that are hard to tap or difficult to see.
- Stack complex content when an expanded panel contains cards, columns, tables, pricing items, or media blocks.
- Keep headings short where possible so accordion labels do not wrap into confusing multi-line blocks.
- Use readable line height because expanded accordion content often contains longer explanations.
- Check resize behavior when you use dynamic max-height animation with JavaScript.
Common JavaScript Accordion Mistakes
Common JavaScript accordion mistakes usually happen when the component is built only for a quick demo instead of a real page. The accordion may work with short text, but then break when the content becomes longer, when the same component is used more than once, or when the layout changes on mobile.
The biggest problems are unclear clickable areas, missing active states, fixed panel heights, non-semantic markup, repeated class names, and JavaScript selectors that affect the wrong component. These issues are easy to avoid when you plan the accordion structure before writing the script.
Labels like “More info” are weak. Use clear labels such as “Shipping details”, “Warranty”, “Pricing FAQ”, or “Product specifications”.
The whole accordion header should open the panel, not just a small plus icon on the right side.
Fixed heights can break with long text, translated content, responsive wrapping, or dynamic content loaded later.
Generic selectors can make multiple accordions conflict when several components are used on the same page.
Update aria-expanded when an item opens or closes and keep trigger elements keyboard-friendly.
Different use cases need different layouts. A pricing accordion, product accordion, FAQ accordion, and dashboard accordion should not all look identical.
- Do not remove focus outlines unless you replace them with a clear custom focus style.
- Do not hide important buying information inside a closed panel if users need it before contacting you or buying.
- Do not use hover-only accordions because they are weak for mobile and touch screens.
- Do not use the same ID twice when copying accordion examples into one page.
- Do not forget to test the accordion after adding real content, especially on mobile.
JavaScript Accordion FAQ
Here are common questions about JavaScript accordions for websites, FAQ sections, ecommerce pages, service pages, dashboards, documentation layouts, and responsive UI components.
A JavaScript accordion is an interactive UI component that opens and closes content panels when users click a heading, button, question, or label. It is commonly used for FAQs, product details, pricing questions, support sections, and dashboards.
Use accordions where users need to scan many sections quickly, such as FAQ pages, product specifications, shipping details, pricing questions, help centers, service pages, documentation menus, course modules, and mobile filters.
It depends on the use case. One-open-at-a-time behavior is good for compact FAQ sections and pricing questions. Multi-open behavior is better for product details, dashboards, documentation, and settings panels where users may compare several sections.
JavaScript gives more control over active states, ARIA attributes, one-open-at-a-time behavior, dynamic heights, resize handling, nested accordions, and more advanced UI logic. CSS can be enough for very simple static accordions.
Yes. Accordions are especially useful on mobile because they reduce scrolling and keep long content organized. Use large tap targets, readable labels, clear icons, and stacked panel content for the best mobile experience.
Yes. These examples use vanilla JavaScript, HTML, and CSS, so they can be pasted into a Gutenberg Custom HTML block. For a live website, repeated CSS and JavaScript should usually be moved into your theme or plugin files.
Conclusion
JavaScript accordions are practical UI components for modern websites because they make long content easier to scan, organize, and use. They are especially useful for FAQ sections, product details, pricing questions, support pages, documentation sections, mobile filters, dashboard settings, course modules, and content-heavy landing pages.
The best accordion examples are not only functional, but also visually clear. A professional accordion should have an obvious clickable header, a strong active state, smooth behavior, readable expanded content, mobile-friendly spacing, and JavaScript that does not conflict with other components on the same page.
Use these 30 JavaScript accordion examples as starting points for real website projects. You can adapt the styles, icons, layouts, colors, open behavior, and content structure for business websites, ecommerce stores, SaaS pages, WordPress sites, dashboards, help centers, and landing pages.
Related JavaScript and CSS Guides
Continue building better website sections and interactive UI components with these related JavaScript and CSS guides. These posts work well together when building full landing pages, product pages, dashboards, forms, filters, menus, and responsive website layouts.
