npm package: @paprika/collapsible
Description: Collapsible component, allows the user to expand and collapse some enclosed content.
Author: @paprika
Latest version: 4.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/collapsible

## Description

Collapsible component, allows the user to expand and collapse some enclosed content.

## Installation

```
yarn add @paprika/collapsible
```

or with npm:

```
npm install @paprika/collapsible
```

## Props

### Collapsible

| Prop                   | Type               | required | default            | Description                                                                                         |
| ---------------------- | ------------------ | -------- | ------------------ | --------------------------------------------------------------------------------------------------- |
| a11yText               | string             | false    | null               | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| children               | node               | false    | null               | Body content of the collapsible.                                                                    |
| iconAlign              | [ "left", "right"] | false    | "left"             | Set's icon alignment left or right.                                                                 |
| iconCollapse           | node               | false    | <RightArrowIcon /> | Sets RightArrowIcon if true.                                                                        |
| iconExpand             | node               | false    | <DownArrowIcon />  | Sets DownArrowIcon if true.                                                                         |
| isCollapsed            | bool               | false    | true               | State of the collapsible.                                                                           |
| isDisabled             | bool               | false    | false              | If the collapsible is disabled.                                                                     |
| hasOnlyIconToggle      | bool               | false    | false              |                                                                                                     |
| label                  | node               | true     | -                  | Sets the label that will display in the collapsible                                                 |
| onClick                | func               | false    | () => {}           | Callback to be executed when the button is clicked or activated by keyboard.                        |
| triggerAriaDescribedby | string             | false    | null               | aria-describedby on the trigger element.                                                            |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

### Usage

```js
import Collapsible from "@paprika/collapsible";

const [isCollapsed, setIsCollapsed] = React.useState(false);

const yourComponent = () => {
  return (
    <Collapsible
      a11yText="collapsible section"
      isCollapsed={isCollapsed}
      isDisabled={false}
      label="Click me to show/hide the content"
      iconAlign="left"
      onClick={() => setIsCollapsed(!isCollapsed)}
    >
      <p>
        <strong>Content</strong> – children of the &lt;Collapsible&gt; is hidden while the collapsible is collapsed, and
        visible with it is expanded.
      </p>
    </Collapsible>
  );
};

export default yourComponent;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-collapsible--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Collapsible/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/collapsible%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Collapsible/CHANGELOG.md)