@servicensw/accordion

accordion component

Usage no npm install needed!

<script type="module">
  import servicenswAccordion from 'https://cdn.skypack.dev/@servicensw/accordion';
</script>

README

@servicensw/accordion

accordion component

Service NSW package documentation and examples
(Login credentials required)

Installation

npm install @servicensw/accordion --save-dev

How to use

CSS

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

Vanilla JS

  • ES6 import: import '@servicensw/accordion';
  • Script tag: <script src="dist/accordion.js" type="text/javascript"></script>

Vanilla JS is called on DOMContentLoaded for all .accordion elements.

Alternatively, initialise it manually for a specific CSS selector:

const accordions = new SNSW.Accordion('.accordion');

HTML

<div class="accordion__group">
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
</div>

or for a group of accordions...

<div class="accordion__group">
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
    </section>
  <section class="accordion">
    <h2 class="accordion__title"><span>Title</span></h2>
    <div class="accordion__body">
      <p>Body content</p>
    </div>
  </section>
</div>