Accordion generator

Long record pages and settings screens use accordions to hide detail until it is needed. Set the active-section accent color and header contrast so open/closed state is obvious at a glance.

Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.

Live preview

Generated code

<template>
    <lightning-accordion active-section-name={activeSectionName} onsectiontoggle={handleToggle} class="studio-accordion">
        <lightning-accordion-section name="section1" label="Account Details">
            <p>Section content goes here.</p>
        </lightning-accordion-section>
        <lightning-accordion-section name="section2" label="Contact Information">
            <p>Section content goes here.</p>
        </lightning-accordion-section>
        <lightning-accordion-section name="section3" label="Billing Address">
            <p>Section content goes here.</p>
        </lightning-accordion-section>
    </lightning-accordion>
</template>

Design tips for accordions

Only auto-expand the section the user most likely needs — defaulting everything open defeats the purpose.
Use the active accent border sparingly; it should be the strongest visual signal on the page for "this is open".
Keep section titles short and scannable — accordions are for scanning, not reading.

Related components

Components developers commonly compare against or pair with Accordion.

Tab Set Card Data Table Tile