

Accordion

This control allows you to render an accordion control.

Here is an example of the control in action:

How to use this control in your solutions

• Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
• In your component file, import the Accordion control as follows:

import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";

• Use the Accordion control in your code as follows:

{
  sampleItems.map((item, index) => (
    <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index}>
      <div className={"itemContent"}>
        <div className={"itemResponse"}>{item.Reponse}</div>
        <div className={"itemIndex"}>{`Langue :  ${item.Langue.Nom}`}</div>
      </div>
    </Accordion>
  ))
}

Implementation

The Accordion control can be configured with the following properties:

Property	Type	Required	Description	Default
title	string	yes	The title in the accordion to display.
defaultCollapsed	boolean	no	Is the accordion by default collapsed?	false
className	string	no	Additional class name to add to your accordion.