Accordion Component for Svelte

Introduction

This Svelte package provides two components for creating collapsible sections: Accordion and SubAccordion. These components are accessible, customizable, and lightweight, with built-in animations and rich styling options. Perfect for displaying nested or standalone collapsible content sections in a clean and interactive manner.

Installation

To clone the package:

git clone [email protected]:geostarters/components/accordion.git

To install the package, use npm or yarn:

npm install @icgcat/accordion

Usage

Import and Basic Example

Here's how to use the Accordion and SubAccordion components in your Svelte application:

<script>
  import { Accordion, SubAccordion } from "@icgcat/accordion";

  let openedAccordion = 0; // Track the currently opened accordion

  const toggleAccordion = (id) => {
    openedAccordion = openedAccordion === id ? 0 : id;
  };
</script>

<Accordion
  id={1}
  openedAccordion={openedAccordion}
  title="First Section"
  iconTheme = "share"
  onToggle={toggleAccordion}
  component={() => <p>Content for the first section</p>}
/>

<Accordion
  id={2}
  openedAccordion={openedAccordion}
  title="Second Section"
  iconTheme = "map"
  onToggle={toggleAccordion}
>
  <SubAccordion
    id={3}
    openedAccordion={openedAccordion}
    title="Nested Section"
    onToggle={toggleAccordion}
  >
    <p>Content for the nested section</p>
  </SubAccordion>
</Accordion>

Props

Accordion

The Accordion component accepts the following props:

| Prop | Type | Default | Description | |-------------------|----------|------------------------|-----------------------------------------------| | id | number | 0 | Unique identifier for each accordion. | | openedAccordion | number | 0 | Tracks the currently opened accordion. | | title | string | "" | The title displayed in the accordion header. | | className | string | "acc" | Custom CSS class for styling. | | iconTheme | string | "keyboard_arrow_down" | Icon displayed in the accordion header. | | component | any | null | Content rendered inside the accordion body. | | onToggle | function | null | Callback triggered when the accordion is toggled. | | openColor | string | "#FFE448" | Background color when the accordion is open. | | backgroundColor | string | "#F5F5F5" | Default background color. | | hoverColor | string | "rgb(173, 173, 173)"| Background color on hover. | | activeColorStyle| string | "rgb(173, 173, 173)"| Background color on active state. | | fontColor | string | "black" | Font color for the accordion header. | | children | function | null | Content passed dynamically to the accordion body. |

SubAccordion

The SubAccordion component accepts the same props as Accordion, with the exception of component. Instead, it expects content to be passed as children.

Styling

The components come with default styles, but you can override them using custom CSS. For example:

.acc {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.collapsible-header {
  transition: background-color 0.3s ease;
}

Transitions

These components use Svelte's slide transition for smooth opening and closing animations. You can modify or replace the transition if desired.

Accessibility

• Fully keyboard-navigable.
• Supports dynamic aria-expanded attributes for screen readers.

Contributions

Feel free to fork this repository and open pull requests to improve the components or add new features.

License

This project is licensed under the MIT License.