sigpro-ui/docs/components/accordion.md

Accordion

Collapsible accordion component for organizing content into expandable sections.

Tag

Accordion

Props

Prop	Type	Default	Description
title	string | VNode | Signal	Required	Accordion section title
open	boolean | Signal<boolean>	false	Whether the accordion is expanded
name	string	auto-generated	Group name for radio-style accordions
class	string	''	Additional CSS classes
children	VNode | Array<VNode>	Required	Content to display when expanded
items	Array	-	Array of accordion items (alternative API)

Live Examples

Basic Accordion

Live Demo

const { Accordion, Div, mount } = window;

const BasicDemo = () => {
  const open1 = $(false);
  const open2 = $(false);
  const open3 = $(false);

  return div({ class: "flex flex-col gap-2" }, [
    Accordion(
      {
        title: "Section 1",
        open: open1,
      },
      div(
        { class: "p-2" },
        "Content for section 1. This is a basic accordion section.",
      ),
    ),
    Accordion({
      title: "Section 2",
      open: open2,
    }, div(
        { class: "p-2" },
        "Content for section 2. You can put any content here.",
      ),),
    Accordion({
      title: "Section 3",
      open: open3,
      children: div(
        { class: "p-2" },
        "Content for section 3. Accordions are great for FAQs.",
      ),
    }),
  ]);
};
mount(BasicDemo, "#demo-basic");