0
# Accordion Components
1

2
Collapsible content panels with smooth animations and keyboard navigation. The accordion components provide a way to organize content in a space-efficient manner with expand/collapse functionality.
3

4
## Core Imports
5

6
```typescript
7
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
8
```
9

10
## Capabilities
11

12
### NgbAccordionDirective
13

14
Main accordion container that manages multiple collapsible items.
15

16
```typescript { .api }
17
@Directive({
18
  selector: '[ngbAccordion]',
19
  exportAs: 'ngbAccordion'
20
})
21
class NgbAccordionDirective {
22
  /** Enable/disable animations for expand/collapse */
23
  @Input() animation: boolean;
24
  
25
  /** If true, only one item can be open at a time */
26
  @Input() closeOthers: boolean;
27
  
28
  /** If true, accordion item content is removed from DOM when collapsed */
29
  @Input() destroyOnHide: boolean;
30
  
31
  /** Event emitted before an item is shown */
32
  @Output() show: EventEmitter<NgbAccordionShowEvent>;
33
  
34
  /** Event emitted after an item is shown */
35
  @Output() shown: EventEmitter<NgbAccordionShowEvent>;
36
  
37
  /** Event emitted before an item is hidden */
38
  @Output() hide: EventEmitter<NgbAccordionHideEvent>;
39
  
40
  /** Event emitted after an item is hidden */
41
  @Output() hidden: EventEmitter<NgbAccordionHideEvent>;
42
  
43
  /** Toggle the specified accordion item */
44
  toggle(id: string): void;
45
  
46
  /** Expand the specified accordion item */
47
  expand(id: string): void;
48
  
49
  /** Expand all accordion items */
50
  expandAll(): void;
51
  
52
  /** Collapse the specified accordion item */
53
  collapse(id: string): void;
54
  
55
  /** Collapse all accordion items */
56
  collapseAll(): void;
57
  
58
  /** Check if the specified accordion item is expanded */
59
  isExpanded(id: string): boolean;
60
}
61
```
62

63
### NgbAccordionItem
64

65
Individual accordion item that can be expanded or collapsed.
66

67
```typescript { .api }
68
@Directive({
69
  selector: '[ngbAccordionItem]',
70
  exportAs: 'ngbAccordionItem'
71
})
72
class NgbAccordionItem {
73
  /** Unique identifier for the accordion item */
74
  @Input() id: string;
75
  
76
  /** If true, content is removed from DOM when collapsed */
77
  @Input() destroyOnHide: boolean;
78
  
79
  /** If true, prevents the item from being toggled */
80
  @Input() disabled: boolean;
81
  
82
  /** Controls the expanded/collapsed state */
83
  @Input() collapsed: boolean;
84
  
85
  /** Event emitted before the item is shown */
86
  @Output() show: EventEmitter<NgbAccordionShowEvent>;
87
  
88
  /** Event emitted after the item is shown */
89
  @Output() shown: EventEmitter<NgbAccordionShowEvent>;
90
  
91
  /** Event emitted before the item is hidden */
92
  @Output() hide: EventEmitter<NgbAccordionHideEvent>;
93
  
94
  /** Event emitted after the item is hidden */
95
  @Output() hidden: EventEmitter<NgbAccordionHideEvent>;
96
  
97
  /** Toggle the item's expanded/collapsed state */
98
  toggle(): void;
99
  
100
  /** Expand the accordion item */
101
  expand(): void;
102
  
103
  /** Collapse the accordion item */
104
  collapse(): void;
105
}
106
```
107

108
### NgbAccordionHeader
109

110
Header area of an accordion item, typically containing the toggle button.
111

112
```typescript { .api }
113
@Directive({
114
  selector: '[ngbAccordionHeader]'
115
})
116
class NgbAccordionHeader {}
117
```
118

119
### NgbAccordionToggle
120

121
Element that triggers the expand/collapse action for an accordion item.
122

123
```typescript { .api }
124
@Directive({
125
  selector: '[ngbAccordionToggle]'
126
})
127
class NgbAccordionToggle {}
128
```
129

130
### NgbAccordionButton
131

132
Button element specifically for accordion toggle functionality.
133

134
```typescript { .api }
135
@Directive({
136
  selector: 'button[ngbAccordionButton]'
137
})
138
class NgbAccordionButton {}
139
```
140

141
### NgbAccordionCollapse
142

143
Wrapper directive for the collapsible content area.
144

145
```typescript { .api }
146
@Directive({
147
  selector: '[ngbAccordionCollapse]'
148
})
149
class NgbAccordionCollapse {}
150
```
151

152
### NgbAccordionBody
153

154
Contains the actual content of an accordion item.
155

156
```typescript { .api }
157
@Directive({
158
  selector: '[ngbAccordionBody]'
159
})
160
class NgbAccordionBody {}
161
```
162

163
### NgbAccordionConfig
164

165
Configuration service for setting default accordion behavior.
166

167
```typescript { .api }
168
@Injectable({ providedIn: 'root' })
169
class NgbAccordionConfig {
170
  /** Default animation setting */
171
  animation: boolean;
172
  
173
  /** Default close others setting */
174
  closeOthers: boolean;
175
  
176
  /** Default destroy on hide setting */
177
  destroyOnHide: boolean;
178
}
179
```
180

181
## Event Interfaces
182

183
```typescript { .api }
184
interface NgbAccordionShowEvent {
185
  itemId: string;
186
  preventDefault: () => void;
187
}
188

189
interface NgbAccordionHideEvent {
190
  itemId: string;
191
  preventDefault: () => void;
192
}
193
```
194

195
## Usage Examples
196

197
### Basic Accordion
198

199
```typescript
200
@Component({
201
  template: `
202
    <ngb-accordion>
203
      <ngb-accordion-item id="item-1">
204
        <ngb-accordion-header>
205
          <button ngbAccordionButton>Simple Item</button>
206
        </ngb-accordion-header>
207
        <ngb-accordion-body>
208
          <p>Content for the first accordion item.</p>
209
        </ngb-accordion-body>
210
      </ngb-accordion-item>
211
      
212
      <ngb-accordion-item id="item-2">
213
        <ngb-accordion-header>
214
          <button ngbAccordionButton>Another Item</button>
215
        </ngb-accordion-header>
216
        <ngb-accordion-body>
217
          <p>Content for the second accordion item.</p>
218
        </ngb-accordion-body>
219
      </ngb-accordion-item>
220
    </ngb-accordion>
221
  `
222
})
223
export class BasicAccordionComponent {}
224
```
225

226
### Programmatic Control
227

228
```typescript
229
@Component({
230
  template: `
231
    <div class="mb-3">
232
      <button class="btn btn-primary me-2" (click)="accordion.expandAll()">
233
        Expand All
234
      </button>
235
      <button class="btn btn-secondary" (click)="accordion.collapseAll()">
236
        Collapse All
237
      </button>
238
    </div>
239
    
240
    <ngb-accordion #accordion [closeOthers]="false">
241
      <ngb-accordion-item id="item-1">
242
        <ngb-accordion-header>
243
          <button ngbAccordionButton>First Item</button>
244
        </ngb-accordion-header>
245
        <ngb-accordion-body>
246
          <p>Content for the first item.</p>
247
        </ngb-accordion-body>
248
      </ngb-accordion-item>
249
    </ngb-accordion>
250
  `
251
})
252
export class ProgrammaticAccordionComponent {}
253
```
254

255
### Event Handling
256

257
```typescript
258
@Component({
259
  template: `
260
    <ngb-accordion
261
      (show)="onShow($event)"
262
      (hide)="onHide($event)">
263
      <ngb-accordion-item id="item-1">
264
        <ngb-accordion-header>
265
          <button ngbAccordionButton>Item with Events</button>
266
        </ngb-accordion-header>
267
        <ngb-accordion-body>
268
          <p>Content that triggers events.</p>
269
        </ngb-accordion-body>
270
      </ngb-accordion-item>
271
    </ngb-accordion>
272
  `
273
})
274
export class EventAccordionComponent {
275
  onShow(event: NgbAccordionShowEvent) {
276
    console.log('Accordion item shown:', event.itemId);
277
  }
278
  
279
  onHide(event: NgbAccordionHideEvent) {
280
    console.log('Accordion item hidden:', event.itemId);
281
  }
282
}
283
```