@contentful/f36-accordion NPM

title: 'Accordion' type: 'component' slug: /components/accordion/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/accordion'

typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx

Store longer content in sections users can open one at a time.

Keep the section titles short.

Import

import { Accordion } from '@contentful/f36-components';
// or
import { Accordion } from '@contentful/f36-accordion';

Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

Basic usage

Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:

Controlled Accordion

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean value to isExpanded for Accordion.Item component

Props (API reference)

Accordion

Accordion.Item

Content guidelines

The title should be a short message that summarize the content of the accordion.
Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.

Accessibility

It allows keyboard navigation to open and close the accordions

@contentful/f36-collapse @contentful/f36-core @contentful/f36-icons @contentful/f36-tokens @contentful/f36-typography emotion

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont @contentful/f36-components

9 days ago

12 days ago

13 days ago

13 days ago

16 days ago

19 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

8 months ago

7 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

4.0.1-next-v4-10675.2471

3 years ago

4.0.1-next-v4-10848.2476

3 years ago

4.0.1-next-v4-10715.2474

3 years ago

4.0.1-next-v4-10839.2475

3 years ago

4.0.1-next-v4-10916.2480

3 years ago

4.0.1-beta.2482

3 years ago

4.0.1-beta.2483

3 years ago

4.0.1-next-v4-10931.2481

3 years ago

4.0.1-beta.2489

3 years ago

4.0.1-beta1.2482

3 years ago

4.0.1-next-v4-10680.2472

3 years ago

4.0.1-next-v4-10623.2468

3 years ago

4.0.1-next-v4-10647.2470

3 years ago

4.0.1-next-v4-10633.2469

3 years ago

4.0.1-next-v4-10536.2462

3 years ago

4.0.1-next-v4-10542.2463

3 years ago

4.0.1-next-v4-10612.2466

3 years ago

4.0.1-next-v4-10595.2465

3 years ago

4.0.1-next-v4-10472.2461

3 years ago

4.0.1-next-v4-10564.2464

3 years ago

4.0.1-next-v4-10423.2460

3 years ago

4.0.1-next-v4-10118.2446

3 years ago

4.0.1-next-v4-10266.2451

3 years ago

4.0.1-next-v4-10292.2452

3 years ago

4.0.1-next-v4-10345.2455

3 years ago

4.0.1-next-v4-9745.2431

3 years ago

4.0.1-next-v4-9473.2426

3 years ago

4.0.1-next-v4-9468.2425

3 years ago

4.0.1-next-v4-9789.2434

3 years ago

4.0.1-next-v4-9961.2441

3 years ago

4.0.1-next-v4-10041.2444

3 years ago

4.0.1-next-v4-10373.2458

3 years ago

4.0.1-next-v4-10308.2453

3 years ago

4.0.1-next-v4-9971.2442

3 years ago

4.0.1-next-v4-9697.2430

3 years ago

4.0.1-next-v4-10223.2450

3 years ago

4.0.1-next-v4-10152.2447

3 years ago

4.0.1-next-v4-10330.2454

3 years ago

4.0.1-next-v4-10204.2448

3 years ago

4.0.1-next-v4-9780.2433

3 years ago

4.0.1-next-v4-9898.2438

3 years ago

4.0.1-next-v4-10363.2457

3 years ago

4.0.1-next-v4-10350.2456

3 years ago

4.0.1-next-v4-9766.2432

3 years ago

4.0.1-next-v4-9921.2439

3 years ago

4.0.1-next-v4-9502.2427

3 years ago

4.0.1-next-v4-10378.2459

3 years ago

4.0.1-next-v4-9547.2428

3 years ago

4.0.1-next-v4-9952.2440

3 years ago

4.0.1-next-v4-9335.2422

3 years ago

4.0.1-next-v4-9346.2423

3 years ago

4.0.1-next-v4-9281.2419

3 years ago

4.0.1-next-v4-9274.2418

3 years ago

4.0.1-next-v4-9248.2416

3 years ago

4.0.1-next-v4-9320.2421

3 years ago

4.0.1-next-v4-9287.2420

3 years ago

4.0.1-next-v4-9225.2415

3 years ago

4.0.1-next-v4-9200.2414

3 years ago

4.0.1-next-v4-9168.2413

3 years ago

4.0.1-next-v4-9155.2412

3 years ago

4.0.1-next-v4-9049.2406

3 years ago

4.0.1-next-v4-9126.2410

3 years ago

4.0.1-next-v4-9086.2408

3 years ago

4.0.1-next-v4-9075.2407

3 years ago

4.0.1-next-v4-9019.2404

3 years ago

4.0.1-next-v4-8971.2401

3 years ago

4.0.1-next-v4-8986.2402

3 years ago

4.0.1-next-v4-8879.2361

3 years ago

4.0.1-next-v4-8833.2358

3 years ago

4.0.1-next-v4-8904.2363

3 years ago

4.0.1-next-v4-8955.2400

3 years ago

4.0.1-next-v4-8942.2365

3 years ago

4.0.1-next-v4-8846.2359

3 years ago

4.0.1-next-v4-8947.2366

3 years ago

4.0.1-next-v4-8753.2355

3 years ago

4.0.1-next-v4-8804.2357

3 years ago

4.0.1-next-v4-8514.2351

3 years ago

4.0.1-next-v4-8739.2354

3 years ago

4.0.1-next-v4-8733.2353

3 years ago

4.0.1-next-v4-8499.2349

3 years ago

4.0.1-next-v4-8377.2344

3 years ago

4.0.1-next-v4-8455.2348

3 years ago

4.0.1-next-v4-8286.2343

3 years ago

4.0.1-next-v4-8206.2342

3 years ago

4.0.1-next-v4-8093.2338

3 years ago

4.0.1-next-v4-8101.2339

3 years ago

4.0.1-next-v4-8125.2340

3 years ago

4.0.1-next-v4-8053.2336

3 years ago

4.0.1-next-v4-8039.2335

3 years ago

4.0.1-next-v4-8006.2334

3 years ago

4.0.1-next-v4-7963.2332

3 years ago

4.0.1-next-v4-8060.2337

3 years ago

4.0.1-next-v4-7985.2333

3 years ago

4.0.1-next-v4-7936.2331

3 years ago

4.0.1-next-v4-7911.2329

3 years ago

4.0.1-next-v4-7926.2330

3 years ago

4.0.1-next-v4-7774.2326

3 years ago

4.0.1-next-v4-7712.2324

3 years ago

4.0.1-next-v4-7888.2327

3 years ago

4.0.1-next-v4-7654.2323

3 years ago

4.0.1-next-v4-7604.2322

3 years ago

4.0.1-next-v4-6754.2279

3 years ago

4.0.1-next-v4-6859.2287

3 years ago

4.0.1-next-v4-6811.2284

3 years ago

4.0.1-next-v4-6748.2278

3 years ago

4.0.1-next-v4-6854.2286

3 years ago

4.0.1-next-v4-6831.2285

3 years ago

4.0.1-next-v4-6763.2280

3 years ago

4.0.1-next-v4-6795.2281

3 years ago

4.0.1-next-v4-6652.2269

3 years ago

4.0.1-next-v4-6664.2273

3 years ago

4.0.1-next-v4-6714.2276

3 years ago

4.0.1-next-v4-6660.2272

3 years ago

4.0.1-next-v4-6682.2274

3 years ago

4.0.1-next-v4-6685.2275

3 years ago

4.0.1-next-v4-6548.2251

3 years ago

4.0.1-next-v4-6507.2250

3 years ago

4.0.1-next-v4-6436.2246

3 years ago

4.0.1-next-v4-6471.2249

3 years ago

4.0.1-next-v4-6465.2248

3 years ago

4.0.1-next-v4-6423.2245

3 years ago

4.0.1-next-v4-6408.2244

3 years ago

4.0.1-next-v4-6443.2247

3 years ago

4.0.1-next-v4-6391.2243

3 years ago

4.0.1-next-v4-6289.2215

3 years ago

4.0.1-next-v4-6265.2213

3 years ago

4.0.1-next-v4-6330.2234

3 years ago

4.0.1-next-v4-6254.2212

3 years ago

4.0.1-next-v4-6282.2214

3 years ago

4.0.1-next-v4-6313.2230

3 years ago

4.0.1-next-v4-6381.2242

3 years ago

4.0.1-next-v4-6321.2232

3 years ago

4.0.1-next-v4-6317.2231

3 years ago

4.0.1-next-v4-6179.2211

3 years ago

4.0.1-next-v4-6174.2195

3 years ago

4.0.1-next-v4-5860.2171

3 years ago

4.0.1-next-v4-5823.2170

3 years ago

4.0.1-next-v4-5803.2169

3 years ago