1.0.1 • Published 4 years ago
@firstandthird/faqs v1.0.1
Accessible FAQs module.
Installation
npm install @firstandthird/faqsUsage
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