@firstandthird/faqs

Accessible FAQs module

Usage no npm install needed!

<script type="module">
  import firstandthirdFaqs from 'https://cdn.skypack.dev/@firstandthird/faqs';
</script>

README

FAQs

Lint Status NPM

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