@pnx-mixtape/accordion

accordion component

Usage no npm install needed!

<script type="module">
  import pnxMixtapeAccordion from 'https://cdn.skypack.dev/@pnx-mixtape/accordion';
</script>

README

@pnx-mixtape/accordion

Documentation and examples: Accordion

Installation

npm install @pnx-mixtape/accordion --save-dev

How to use

CSS

  • PostCSS workflow: @import '@pnx-mixtape/accordion';
  • Sass/Eyeglass: @import 'mixtape-accordion';
  • Native CSS: @import url('dist/accordion.css');
  • Link tag: <link href="dist/accordion.css" rel="stylesheet" type="text/css">

Vanilla JS

Javascript is used to handle opening and closing the accordion when the user prints the screen. This sets the open attribute onbeforeprint and closes it onafterprint window events. The content's ID is also set via js.

  • ES6 import: import Accordion from '@pnx-mixtape/accordion';
  • Script tag: <script src="dist/accordion.js" type="text/javascript"></script>

HTML

<details class="accordion">
  <summary class="button button--primary">Title</summary>
  <div class="accordion__content">
    <p>Body content</p>
  </div>
</details>