@economist/component-accordion NPM

Accordion

Collapse a series of panels, when one of those panels is expanded

Usage

This component expects an ES6 environment, and so if you are using this in an app, you should drop in a polyfill library - it has been tested with babel-polyfill but core-js or es6-shim may also work.

The default export is a React Component, so you can simply import the component and use it within some JSX, like so:

import { Accordion, Panel } from '@economist/component-accordion';

return (
  <Accordion>
    <Panel header={<h2>Search Engines</h2>}>
      <a href="http://google.com">Google</a>
      <a href="http://bing.com">Bing</a>
      <a href="http://yahoo.com">Yahoo</a>
    </Panel>
  </Accordion>
);

For more examples on usage, see src/example.es6.