Accessible FAQs module.

Installation

npm install @firstandthird/faqs

Usage

In your project import the library:

import '@firstandthird/faqs'

// or

import Faqs from '@firstandthird/faqs'

Module Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | animateHeight | {Boolean} | false | Enable expand/collapse height animation (requires CSS, see example) | | closeOthers | {Boolean} | true | Only allows one expanded element at a time | | hash | {Boolean} | true | Expand elements whose ID matches the current URL hash |

Example markup

<dl data-module="Faqs"
    data-module-animate-height="false"
    data-module-close-others="true"
    data-module-hash="true">
  <dt>
    <button
      type="button"
      aria-expanded="false"
      aria-controls="question-1"
      data-action="toggle">Question 1?</button>
  </dt>
  <dd id="question-1" aria-hidden="true">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  </dd>
</dl>

Full example here.

A First + Third Project