@minna-ui/collapse NPM

`@minna-ui/collapse`

A simple component to expand and collapse a section of HTML. It can be used standalone, in Svelte projects, or any JavaScript project.

FIXME: Test if standalone version works correctly.

TODO: Write note about @minna-ui/css interplay/dependency.

TODO: Example image.

TODO: Add link to demo and documentation page.

Usage

Standalone

The easiest way to use the component is to add the CDN hosted version directly in your HTML.

TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

Add the CSS and JS to your document, inside the <head></head>:

 <link href="https://cdn.jsdelivr.net/npm/@minna-ui/collapse/dist/index.css" rel="stylesheet"/>

 <script src="https://cdn.jsdelivr.net/npm/@minna-ui/collapse"></script>

Or use a specific version:

 <link href="https://cdn.jsdelivr.net/npm/@minna-ui/collapse@0.4.1/dist/index.css" rel="stylesheet"/>

 <script src="https://cdn.jsdelivr.net/npm/@minna-ui/collapse@0.4.1"></script>

Add element/s where you want the component to show in your document <body></body>:

 <div class="minna-collapse">
   <p>This is my collapsed content.</p>
 </div>

 <div class="minna-collapse">
   <p>This is more collapsed content.</p>
 </div>

Initialise the component/s (this script must come after the HTML code in step 2):

<script>
  var collapseEls = document.querySelectorAll('.minna-collapse');
  collapseEls.forEach(function(el) {
    new MinnaCollapse({ target: el });
  });
</script>

Svelte projects

Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

Install the package:
```
yarn add @minna-ui/collapse
```

Add to your Svelte component:

MySvelteComponent.html:

 <MinnaCollapse>
   <p>This is my collapsed content.</p>
 </MinnaCollapse>

 <script>
   import MinnaCollapse from '@minna-ui/collapse';

   export default {
     components: {
       MinnaCollapse,
     },
   };
 </script>

Other JavaScript projects

This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

Install the package:
```
yarn add @minna-ui/collapse
```

Add to your files:

my-example.html:

 <div class="minna-collapse">
   <p>This is my collapsed content.</p>
 </div>

 <div class="minna-collapse">
   <p>This is more collapsed content.</p>
 </div>

my-example.js:

import MinnaCollapse from '@minna-ui/collapse';

const collapseEls = document.querySelectorAll('.minna-collapse');
collapseEls.forEach((el) => {
  new MinnaCollapse({ target: el });
});