@pnx-mixtape/accordion v1.0.7
@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">
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, 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>
HTML
<details class="accordion" data-accordion>
<summary class="accordion__toggle">Title</summary>
<div class="accordion__content">
<p>Body content</p>
</div>
</details>
21 days ago
6 months ago
7 months ago
8 months ago
9 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago