0
# React Collapsible
1

2
React Collapsible is a flexible and accessible component for creating collapsible content sections with customizable triggers. Unlike accordions, multiple sections can be open simultaneously, making it ideal for FAQ sections, content organization, and space-efficient UI layouts.
3

4
## Package Information
5

6
- **Package Name**: react-collapsible
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install react-collapsible`
10

11
## Core Imports
12

13
```typescript
14
import Collapsible from "react-collapsible";
15
import { CollapsibleProps } from "react-collapsible";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const Collapsible = require("react-collapsible");
22
```
23

24
## Basic Usage
25

26
```jsx
27
import React from "react";
28
import Collapsible from "react-collapsible";
29

30
// Simple usage
31
<Collapsible trigger="Click to expand">
32
  <p>This content can be expanded or collapsed.</p>
33
  <p>It can contain any React elements or HTML.</p>
34
</Collapsible>
35

36
// Controlled usage
37
const [isOpen, setIsOpen] = useState(false);
38

39
<Collapsible 
40
  trigger="Toggle Content"
41
  open={isOpen}
42
  handleTriggerClick={() => setIsOpen(!isOpen)}
43
>
44
  <div>Controlled collapsible content</div>
45
</Collapsible>
46
```
47

48
## Architecture
49

50
React Collapsible is built around a single component with comprehensive customization options:
51

52
- **Core Component**: `Collapsible` class component that wraps content and provides trigger functionality
53
- **State Management**: Internal state for animation timing, height calculations, and open/closed status
54
- **Accessibility**: Built-in ARIA attributes and keyboard support
55
- **CSS Integration**: BEM-style class names for easy styling
56
- **Animation System**: Smooth height transitions with configurable timing and easing
57

58
## Capabilities
59

60
### Basic Collapsible Component
61

62
The main component for creating collapsible content sections with customizable triggers and content.
63

64
```typescript { .api }
65
import Collapsible from "react-collapsible";
66

67
declare class Collapsible extends React.Component<CollapsibleProps> {}
68

69
export default Collapsible;
70
```
71

72
[Configuration and Styling](./configuration.md)
73

74
### Animation and Transitions
75

76
Control the timing, easing, and behavior of expand/collapse animations for smooth user experiences.
77

78
```typescript { .api }
79
interface AnimationProps {
80
  transitionTime?: number;
81
  transitionCloseTime?: number | null;
82
  easing?: string;
83
  overflowWhenOpen?: "hidden" | "visible" | "auto" | "scroll" | "inherit" | "initial" | "unset";
84
}
85
```
86

87
[Animation and Transitions](./animation.md)
88

89
### Event Handling
90

91
Comprehensive callback system for responding to state changes and user interactions throughout the collapsible lifecycle.
92

93
```typescript { .api }
94
interface EventProps {
95
  handleTriggerClick?: (accordionPosition?: string | number) => void;
96
  onOpen?: () => void;
97
  onClose?: () => void;
98
  onOpening?: () => void;
99
  onClosing?: () => void;
100
  onTriggerOpening?: () => void;
101
  onTriggerClosing?: () => void;
102
}
103
```
104

105
[Event Handling](./events.md)
106

107
## Accessibility Features
108

109
React Collapsible includes comprehensive accessibility support:
110

111
- **ARIA Attributes**: Automatically adds `aria-expanded`, `aria-disabled`, `aria-controls`, and `aria-labelledby`
112
- **Semantic Roles**: Trigger has `role="button"`, content has `role="region"`
113
- **Keyboard Support**: Enter and Space key handling for trigger activation
114
- **Focus Management**: Configurable `tabIndex` for keyboard navigation
115
- **Screen Reader Support**: Optional `contentHiddenWhenClosed` to hide content from screen readers when collapsed
116

117
## Common Issues and Solutions
118

119
### Animation Not Triggering
120

121
If transitions are not working smoothly, ensure:
122

123
- Content has measurable height (avoid elements with `height: 0` that don't expand)
124
- CSS transitions are not conflicting with the component's internal styles
125
- `transitionTime` is set to a reasonable value (default: 400ms)
126

127
### Performance with Large Content
128

129
For better performance with expensive or large content:
130

131
```jsx
132
<Collapsible
133
  trigger="Performance optimized"
134
  lazyRender={true}
135
  contentHiddenWhenClosed={true}
136
  transitionTime={300}
137
>
138
  <ExpensiveComponent />
139
</Collapsible>
140
```
141

142
### Accessibility Concerns
143

144
Ensure proper accessibility by:
145

146
- Using `contentHiddenWhenClosed={true}` to hide collapsed content from screen readers
147
- Setting appropriate `tabIndex` for keyboard navigation
148
- Providing descriptive trigger text or using `triggerElementProps` for `aria-label`
149

150
## Types
151

152
```typescript { .api }
153
interface CollapsibleProps extends React.HTMLProps<Collapsible> {
154
  // Required props
155
  trigger: string | React.ReactElement<any>;
156
  
157
  // State control
158
  open?: boolean;
159
  triggerDisabled?: boolean;
160
  
161
  // Content behavior
162
  lazyRender?: boolean;
163
  contentHiddenWhenClosed?: boolean;
164
  
165
  // Element customization
166
  contentContainerTagName?: string;
167
  triggerTagName?: string;
168
  containerElementProps?: object;
169
  triggerElementProps?: object;
170
  contentElementId?: string;
171
  
172
  // Styling
173
  classParentString?: string;
174
  className?: string;
175
  openedClassName?: string;
176
  triggerStyle?: null | React.CSSProperties;
177
  triggerClassName?: string;
178
  triggerOpenedClassName?: string;
179
  contentOuterClassName?: string;
180
  contentInnerClassName?: string;
181
  
182
  // Advanced features
183
  triggerWhenOpen?: string | React.ReactElement<any>;
184
  triggerSibling?: string | React.ReactElement<any> | (() => React.ReactElement<any>);
185
  accordionPosition?: string | number;
186
  tabIndex?: number;
187
  
188
  // Animation (see Animation sub-doc for details)
189
  transitionTime?: number;
190
  transitionCloseTime?: number | null;
191
  easing?: string;
192
  overflowWhenOpen?: "hidden" | "visible" | "auto" | "scroll" | "inherit" | "initial" | "unset";
193
  
194
  // Events (see Events sub-doc for details)
195
  handleTriggerClick?: (accordionPosition?: string | number) => void;
196
  onOpen?: () => void;
197
  onClose?: () => void;
198
  onOpening?: () => void;
199
  onClosing?: () => void;
200
  onTriggerOpening?: () => void;
201
  onTriggerClosing?: () => void;
202
}
203
```
204

205
## Default Values
206

207
The component provides sensible defaults for most properties:
208

209
```typescript { .api }
210
// Key default values
211
{
212
  transitionTime: 400,           // 400ms animation duration
213
  easing: "linear",             // Linear animation timing
214
  open: false,                  // Start closed
215
  triggerTagName: "span",       // Trigger element type
216
  contentContainerTagName: "div", // Content container type
217
  classParentString: "Collapsible", // Base CSS class
218
  lazyRender: false,           // Render content immediately
219
  triggerDisabled: false,      // Enable trigger interaction
220
  overflowWhenOpen: "hidden",  // Hide overflow when open
221
  contentHiddenWhenClosed: false // Content visible to screen readers when closed
222
}
223
```