Learn how to use both column-based and classic accordions with the JSON Layout API V2
A column-based accordion where only one panel can be open at a time. Perfect for FAQ sections and content organization.
// V2 API - Semantic Content Types
const config = {
version: 2,
layoutId: "accordion-demo-1",
breakpoints: { xs: 1 },
items: [
{
content: {
type: "accordion",
variant: "default",
singleOpen: true,
items: [
{
title: "What is RSL?",
content: "<p>Responsive Slot Layout (RSL) is a zero-dependency UI framework that provides accessible, responsive components for modern web applications.</p>",
open: true
},
{
title: "How does it work?",
content: "<p>RSL uses a slot-based grid system with data attributes for breakpoints. It auto-detects viewport size and adjusts layouts accordingly without media queries in JavaScript.</p>"
},
{
title: "Is it accessible?",
content: "<p>Yes! RSL is fully WCAG 2.1 AA compliant with keyboard navigation, ARIA attributes, and screen reader support built-in.</p>"
}
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);A column-based accordion where multiple panels can be open simultaneously. Great for filters and advanced content sections.
// V2 API - Multi-Open with Icons
const config = {
version: 2,
layoutId: "accordion-demo-2",
breakpoints: { xs: 1 },
items: [
{
content: {
type: "accordion",
variant: "default",
singleOpen: false,
items: [
{
title: "Price Range",
icon: "fas fa-filter",
content: "<p><label><input type='checkbox'> Under $50</label></p><p><label><input type='checkbox'> $50 - $100</label></p><p><label><input type='checkbox'> Over $100</label></p>",
open: true
},
{
title: "Colors",
icon: "fas fa-palette",
content: "<p><label><input type='checkbox'> Red</label></p><p><label><input type='checkbox'> Blue</label></p><p><label><input type='checkbox'> Green</label></p>",
open: true
},
{
title: "Brand",
icon: "fas fa-tag",
content: "<p><label><input type='checkbox'> Brand A</label></p><p><label><input type='checkbox'> Brand B</label></p><p><label><input type='checkbox'> Brand C</label></p>"
}
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);A classic full-width accordion with traditional styling. Only one section can be open at a time - perfect for terms of service or documentation.
// V2 API - Classic Variant with Single-Open Mode
const config = {
version: 2,
layoutId: "accordion-demo-3",
breakpoints: { xs: 1 },
items: [
{
content: {
type: "accordion",
variant: "classic",
singleOpen: true,
items: [
{
title: "Getting Started",
icon: "fas fa-rocket",
content: "<p>To get started with RSL, simply include the CSS and JavaScript files in your HTML. No build process or dependencies required.</p><p>You can download the complete package or use individual components as needed.</p>",
open: true
},
{
title: "Basic Usage",
icon: "fas fa-code",
content: "<p>Use the slot-layout class with data-cols-* attributes to create responsive grids.</p><p>Components auto-initialize on page load and work with the JSON Layout API for declarative rendering.</p>"
},
{
title: "Advanced Features",
icon: "fas fa-graduation-cap",
content: "<p>RSL includes advanced features like adaptive density, dark mode, keyboard navigation, and full ARIA support.</p><p>All components are framework-agnostic and work with vanilla JavaScript, React, Vue, or any other framework.</p>"
}
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);A classic accordion allowing multiple panels to be open. Perfect for product specifications or feature comparisons.
// V2 API - Classic Variant with Multi-Open Mode
const config = {
version: 2,
layoutId: "accordion-demo-4",
breakpoints: { xs: 1 },
items: [
{
content: {
type: "accordion",
variant: "classic",
singleOpen: false,
items: [
{
title: "Technical Specifications",
icon: "fas fa-microchip",
content: "<ul><li>Zero dependencies - no jQuery, no frameworks</li><li>36 CSS component files</li><li>34 JavaScript modules</li><li>WCAG 2.1 AA compliant</li></ul>",
open: true
},
{
title: "Components Included",
icon: "fas fa-puzzle-piece",
content: "<ul><li>Modals, Alerts, Toast Notifications</li><li>Accordions, Tabs, Carousels</li><li>Forms, Tooltips, Popovers</li><li>Navigation, Breadcrumbs, Offcanvas</li></ul>",
open: true
},
{
title: "Browser Support",
icon: "fas fa-mobile-alt",
content: "<ul><li>Chrome, Firefox, Safari, Edge (latest versions)</li><li>Mobile: iOS Safari, Chrome Mobile</li><li>Responsive from 320px to 4K displays</li><li>Touch and mouse input supported</li></ul>"
}
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);