Relapse

Intro

An A11y compliant, lightweight (2.7kb gzip) dependency free toggle utility. Create dynamic collapsible accordions, menu lists, content blocks, and expanded folds with custom styling choices. Relapse supports various markup structures, ensures silky smooth transitions and flaunts an extensive user-friendly API with refined programmatic control.

Collapse 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Collapse 1

Collapse 1.1

Collapse 1.2

Collapse 2

Commodo sed egestas egestas fringilla phasellus faucibus. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Nullam eget felis eget nunc lobortis mattis. Et netus et malesuada fames ac turpis egestas maecenas. Vitae turpis massa sed elementum tempus egestas. Eget mi proin sed libero enim sed faucibus turpis. Pharetra convallis posuere morbi leo urna molestie. Magna eget est lorem ipsum dolor. Convallis tellus id interdum velit laoreet id. At consectetur lorem donec massa sapien faucibus et molestie. Porttitor lacus luctus accumsan tortor posuere ac.

Collapse 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ac tortor dignissim convallis aenean et tortor at risus. Nec feugiat nisl pretium fusce id velit ut. Ipsum consequat nisl vel pretium lectus quam id. Sit amet purus gravida quis blandit. Quis auctor elit sed vulputate mi sit. Purus semper eget duis at tellus at urna condimentum mattis. Lacinia at quis risus sed. Venenatis urna cursus eget nunc. Turpis egestas pretium aenean pharetra. Augue eget arcu dictum varius duis at consectetur lorem donec.

Markup

Relapse supports semantic and sibling markup (HTML) structures. The choice between them depends on your preference and the type of collapsible component you are creating.

<section id="example">
  <!-- [0] -->
  <details open>
    <summary>Opens Fold #1</summary>
    <p>This is Fold #1 and will be opened by default</p>
  </details>
  <!-- [1] -->
  <details>
    <summary>Opens Fold #2</summary>
    <p>This is Fold #2</p>
  </details>
  <!-- [2] -->
  <details>
    <summary>Opens Fold #3</summary>
    <p>This is Fold #3</p>
  </details>
</section>

<div id="example">
  <!-- [0] -->
  <button type="button">Opens Fold #1</button>
  <section>
    <div>This is Fold #1 and will be opened by default</div>
  </section>
  <!-- [1] -->
  <button type="button">Opens Fold #2</button>
  <section>
    <div hidden>This is Fold #2</div>
  </section>
  <!-- [2] -->
  <button type="button">Opens Fold #3</button>
  <section>
    <div hidden>This is Fold #3</div>
  </section>
</div>

Script

Relapse can be initialized in various ways, as detailed in the instance section. It is designed to work seamlessly upon invocation without requiring any options.

import Relapse from 'relapse';

const element = document.querySelector('#example');
const relapse = Relapse(element, {
  persist: false,
  multiple: false
  // etc etc
});

Style

Relapse manages animations and transitions, this allows you to customize the appearance of your components according to your preferences. The below CSS styles serves as a starting point for tailoring the visual aspects of Relapse components. For a more comprehensive example and detailed guidance on styling, refer to the styling section.

.relapse {}
.relapse > details[open] > summary {}
.relapse > details > summary {}
.relapse > details > summary:focus {}
.relapse > details > summary:hover {}
.relapse > details > summary + div {}

/* Relapse State Classes */

.relapse > details > summary.opened {}
.relapse > details > summary.disabled {}
.relapse > details > summary + div.expanded {}

.relapse {}
.relapse > button {}
.relapse > button:focus {}
.relapse > button:hover {}
.relapse > button + div {}

/* Relapse State Classes */

.relapse > button.opened {}
.relapse > button.disabled {}
.relapse > button + div.expanded {}

Introduction

Install