- a self-contained component for FAQ accordion lists with "question-answer" pairs:
- includes optional sidebar for title and tagline
- items can expand and shrink based on user interaction
- fully accessible (screen-reader friendly for "expanded" and "collapsed" states)
- fully useable out-of-the-box and extensible for both developers and content creators
- on the command line:
% npm install
-
nearly everything lives in the
KeepFAQs
components folder (onlyindex.css
lives on the root) -
for developers, edit:
index.css
for styling changescomponents/KeepFAQs/Header.js
,components/KeepFAQs/Questions.js
andcomponents/KeepFAQs/Question.js
for structural changescomponents/KeepFAQs/config.js
andcomponents/KeepFAQs/data.js
for instance-specific changes and localizationcomponents/KeepFAQs/config.js
(header and accessibility) andcomponents/KeepFAQs/data.js
(questions and answers)
-
to incorporate into your own app:
- simply put
<KeepFAQsHeader />
and<KeepFAQsQuestions>
anywhere inside the return() on your ownApp.js
- don't forget to import these components as you see in the
App.js
sample
- simply put