Components

On This Page

Accordion

The Accordion component allows users to expand and collapse sections of content. It's commonly used for FAQs, menus, or any scenario where space efficiency is important.

Accordion with Rotating Icon

  • Click to collapse

    Content inside Accordion.

  • Click to collapse

    Content inside Accordion.

  • Click to collapse

    Content inside Accordion.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
Styles
static any[] use = [Accordion, Content]
Content
Accordion{
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconRotate{
                    Svg{ props: ({xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', viewBox: '0 0 16 16'}) 
                        Path{ props: ({fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M2 5l6 6 6-6'}) }
                    }
                }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconRotate{
                    Svg{ props: ({xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', viewBox: '0 0 16 16'}) 
                        Path{ props: ({fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M2 5l6 6 6-6'}) }
                    }
                }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconRotate{
                    Svg{ props: ({xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', viewBox: '0 0 16 16'}) 
                        Path{ props: ({fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M2 5l6 6 6-6'}) }
                    }
                }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
}

Accordion with Swappable Icon

  • Click to collapse
    +-

    Content inside Accordion.

  • Click to collapse
    +-

    Content inside Accordion.

  • Click to collapse
    +-

    Content inside Accordion.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
Styles
static any[] use = [Accordion, Content]
Content
Accordion{
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconSwap{ Span`+` Span`-` }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconSwap{ Span`+` Span`-` }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
    AccordionSection{
        AccordionToggle{
            content: [
                T`Click to collapse`, 
                IconSwap{ Span`+` Span`-` }
            ]
        }
        AccordionContent{
            Content{
                P`Content inside Accordion.`
            }
        }
    }
}