npm package: @morsedigital/vanilla-collapsible-content
Description: Collapsible content module written in vanilla JavaScript
Author: Ian Hatton
Latest version: 1.5.0

# vanilla-collapsible-content

### Synopsis
A collapsible content module written in vanilla JavaScript.

### Installation
```
npm install @morsedigital/vanilla-collapsible-content
```

### Running tests
```
npm run test
```

### Example Instantiation
```javascript
import CollapsibleContentClass from '@morsedigital/vanilla-collapsible-content';

const collapsibleContentElements = document.querySelectorAll('.collapsible-content');

if (collapsibleContentElements.length > 0){
  Array.from(collapsibleContentElements).map((element)=>{
    return new CollapsibleContentClass({
      element: element
    });
  });
}
```

### Configuration
A new instance of CollapsibleContentClass can contain the following in its configuration object:
```javascript
new CollapsibleContentClass({
  element: // The DOM node to be instantiated as having collapsible content
  , bodyContainerClass: // String. Class for each collapsible content item's body. Default is "collapsible-content-body"
  , itemContainerClass: // String. Class for each collapsible content item. Default is "collapsible-content-item"
  , toggleContainerClass: // String. Class for each collapsible content item's toggle. Default is "collapsible-content-toggle"
});
```

### Example HTML structure (no nesting, expanded only at desktop)
```html
<div class="collapsible-content" data-name="collapsible-example" data-visible-desktop="true">
  <div class="collapsible-content-item" data-parent="collapsible-example">
    <div class="collapsible-content-toggle">
      <p>The toggle. This can be any element.</p>
    </div>
    <div class="collapsible-content-body">
      <p>The body. This can be any element.</p>
    </div>
  </div>
  <div class="collapsible-content-item" data-parent="collapsible-example">
    <article>
      <div class="collapsible-content-toggle">
        <h1>Another toggle.</h1>
      </div>
      <div class="collapsible-content-body">
        <p>Another body.</p>
      </div>
    </article>
  </div>
</div>
```

### Example HTML structure (nested, expanded at all breakpoints)
```html
<div class="collapsible-content" data-name="collapsible-example-outer" data-visible-mobile="true" data-visible-tablet="true" data-visible-desktop="true">
  <div class="collapsible-content-item" data-parent="collapsible-example-outer">
    <div class="collapsible-content-toggle">
      <p>The toggle. This can be any element.</p>
    </div>
    <div class="collapsible-content-body">
      <p>The body. This can be any element.</p>
      <!-- A nested collapsible-content div. Note the data-name attribute -->
      <div class="collapsible-content" data-name="collapsible-example-inner">
        <div class="collapsible-content-item" data-parent="collapsible-example-inner">
          <div class="collapsible-content-toggle">
            <p>Another toggle, this time on the inner element.</p>
          </div>
          <div class="collapsible-content-body">
            <p>Another body, this time on the inner element.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="collapsible-content-item" data-parent="collapsible-example-outer">
    <article>
      <div class="collapsible-content-toggle">
        <h1>Another toggle.</h1>
      </div>
      <div class="collapsible-content-body">
        <p>Another body.</p>
      </div>
    </article>
  </div>
</div>
```

All collapsible content items must be wrapped in a single parent div with a class of ***collapsible-content***, and individually wrapped in a div with a class of ***collapsible-content-item***. They always contain a div with a class of ***collapsible-content-toggle*** and ***collapsible-content-body***.

The ***data-name*** attribute of ***collapsible-content*** and ***data-parent*** attribute of ***collapsible-content-item*** determines the relationship between the two. This is in case you need to nest multiple collapsible content divs inside one another.

The optional ***data-visible-*** attributes of ***collapsible-content-item*** determine whether or not the items are expanded or collapsed by default at the corresponding breakpoint. If they are omitted, they will default to false (collapsed).

### CSS
As a bare minimum, you'll require the following, or similar CSS:

```scss
.collapsible-content-body {
  display: none;
  
  &.open {
    display: block;
  }
}
```