Get started

Browser support

Compotes uses modern API to work like ResizableObserver, MutationObserver, css variables or :scope selector: so IE11 is not supported.

Installation

1. Install the library with your favorite package manager

# pnpm
pnpm add -D compotes

#npm
npm i -D compotes

# yarn
yarn add -D compotes

2. Import the component(s) you want

import { Collapse } from 'compotes'

const collapse = new Collapse('#my-collapse')

INFO

If you need to init several element, you need to do a loop.

Array.from(document.getElementsByClassName('c-collapse'))
  .forEach(el => new Collapse(el))

3. Import the CSS related to the component.

// All components
@import 'compotes/css/style.css';

// One component
@import 'compotes/css/drilldown.css';

INFO

The above import will work on modern building tools, like ViteJS and Webpack 5, which support package imports. If not, you can use the direct CSS location:

@import 'compotes/style.css';
@import 'compotes/css/collapse.css';

4. Use the HTML component markup

<button class="c-collapse-trigger" aria-controls="my-collapse">
  Trigger collapse
</button>
<div class="c-collapse" id="my-collapse">
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus.
  </p>
</div>

5. That's it! Check each component for details about structure, advice for accessibility, options and more!