# svelte-collapse

> A Svelte Action that is applied to an element to transition its height between open and closed states.

Latest version **0.1.4** (published 2024-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-collapse
pnpm add svelte-collapse
yarn add svelte-collapse
bun add svelte-collapse
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2024-11-21 |
| First published | 2020-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Maintainers | rsdavis |

## Links

- npm: https://www.npmjs.com/package/svelte-collapse
- Repository: https://github.com/rsdavis/svelte-collapse
- Homepage: https://github.com/rsdavis/svelte-collapse#readme
- Issues: https://github.com/rsdavis/svelte-collapse/issues
- npm.io page: https://npm.io/package/svelte-collapse

## Recent versions

- 0.1.4 (latest) — 2024-11-21
- 0.1.3 — 2024-08-14
- 0.1.2 — 2023-04-29
- 0.1.1 — 2022-05-13
- 0.1.0 — 2022-04-29
- 0.0.4 — 2021-06-02
- 0.0.3 — 2021-06-02
- 0.0.2 — 2020-11-23
- 0.0.1 — 2020-11-23

## README

# Svelte Collapse

A Svelte Action that is applied to an element to transition its height between open and closed states.

## Usage

```bash
npm install svelte-collapse
```

```html
<script>
    import collapse from 'svelte-collapse'
    let open = true
</script>

<div use:collapse={{open}}>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>

<button on:click={() => open = !open}>
    Toggle
</button>
```

Additional parameters that can be used to modify the transition properties, the defaults are shown below.

```html
<div use:collapse={{ open: true, duration: 0.2, easing: 'ease' }}>
```

## Motivation

Transitioning the height of an element using CSS alone is generally not sufficient.
We need to use some Javascript to keep the height variable, so that it responds naturally to added content or a screen resize. 
This action relies on CSS to handle the transitions smoothly, and Javascript to manage the styles.

By wrapping the logic of this approach in an Action, the elements can be easily styled.
Additionally, by maintaining the open state outside of the action, the user has complete control over the open/close mechanism.

The transitions are reversible, so that an open or close transition can be safely interrupted.

---
_Source: https://npm.io/package/svelte-collapse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._