firstandthird / faqs

Accessible FAQs module

FAQs

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