@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';
• Native CSS: @import url('dist/accordion.css');
• Link tag: <link href="dist/accordion.css" rel="stylesheet" type="text/css">

Web Components

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

• DetailsBase import: import '@pnx-mixtape/accordion/DetailsBase'; and be sure to include <mx-details> around the <details /> tag.
• DetailsMobile import: import '@pnx-mixtape/accordion/DetailsBase'; and be sure to include <mx-detailsmobile> around the <details /> tag.
• DetailsDiv import: import '@pnx-mixtape/accordion/DetailsBase'; and be sure to include <mx-detailsdiv class="accordion"> instead of the <details /> tag.

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

See twig files for all HTML examples.

Vanilla JS (to be deprecated)

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, AccordionDiv } from '@pnx-mixtape/accordion';
• ES6 submodule import: import AccordionDiv from '@pnx-mixtape/accordion/accordion-div';
• Script tag: <script src="dist/accordion.js" type="text/javascript"></script>

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