# Accordion Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accordion--introduction ## Variants documented in Storybook - SimpleAccordions: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accordion--simpleaccordions - StructuredAccordions: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accordion--structuredaccordions ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Accordion. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Accordion

Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once

Simple Accordion Showcase

Live previews taken directly from the simple Accordion showcase blocks in src/index.html.

Title Left, Arrow Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Arrow Left + Title

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Structured Variants Showcase

Background and bordered accordion variants preserved from the source showcase.

Background Header & Body

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

With Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

CSS Class Reference

Classes used by the showcased Accordion variants only.

Structure

Accordion wrapper ux4g-accordion
Accordion item ux4g-accordion__item
Item header ux4g-accordion__header
Accordion trigger button ux4g-accordion__button
Button content wrapper ux4g-accordion__button-content
Accordion title text ux4g-accordion__title
Collapsible panel wrapper ux4g-accordion__collapse
Accordion body content ux4g-accordion__body

Variants

Arrow right alignment ux4g-accordion-arrow-right
Arrow left alignment ux4g-accordion-arrow-left
Neutral accordion wrapper ux4g-bg-neutral
Neutral soft background body ux4g-bg-neutral-soft
Bordered container variant ux4g-accordion-bordered
Collapsed trigger state collapsed
Collapsed panel utility collapse
``` React: ```jsx import React from 'react'; const AccordionExample1Demo = () => ( <>
Components

Accordion

Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once

Simple Accordion Showcase

Live previews taken directly from the simple Accordion showcase blocks in src/index.html .

Title Left, Arrow Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Arrow Left + Title

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Structured Variants Showcase

Background and bordered accordion variants preserved from the source showcase.

Background Header & Body

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

With Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

CSS Class Reference

Classes used by the showcased Accordion variants only.

Structure

Accordion wrapper ux4g-accordion
Accordion item ux4g-accordion__item
Item header ux4g-accordion__header
Accordion trigger button ux4g-accordion__button
Button content wrapper ux4g-accordion__button-content
Accordion title text ux4g-accordion__title
Collapsible panel wrapper ux4g-accordion__collapse
Accordion body content ux4g-accordion__body

Variants

Arrow right alignment ux4g-accordion-arrow-right
Arrow left alignment ux4g-accordion-arrow-left
Neutral accordion wrapper ux4g-bg-neutral
Neutral soft background body ux4g-bg-neutral-soft
Bordered container variant ux4g-accordion-bordered
Collapsed trigger state collapsed
Collapsed panel utility collapse
); export default AccordionExample1Demo; ``` Angular: ```html
Components

Accordion

Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once

Simple Accordion Showcase

Live previews taken directly from the simple Accordion showcase blocks in src/index.html.

Title Left, Arrow Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Arrow Left + Title

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Structured Variants Showcase

Background and bordered accordion variants preserved from the source showcase.

Background Header & Body

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

With Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

CSS Class Reference

Classes used by the showcased Accordion variants only.

Structure

Accordion wrapper ux4g-accordion
Accordion item ux4g-accordion__item
Item header ux4g-accordion__header
Accordion trigger button ux4g-accordion__button
Button content wrapper ux4g-accordion__button-content
Accordion title text ux4g-accordion__title
Collapsible panel wrapper ux4g-accordion__collapse
Accordion body content ux4g-accordion__body

Variants

Arrow right alignment ux4g-accordion-arrow-right
Arrow left alignment ux4g-accordion-arrow-left
Neutral accordion wrapper ux4g-bg-neutral
Neutral soft background body ux4g-bg-neutral-soft
Bordered container variant ux4g-accordion-bordered
Collapsed trigger state collapsed
Collapsed panel utility collapse
``` ### 2. Simple Accordions — Title Left, Arrow Right HTML: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` React: ```jsx import React from 'react'; const AccordionExample2Demo = () => ( <> {/* Variant: Accordion - Title Left, Arrow Right */}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

); export default AccordionExample2Demo; ``` Angular: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo eget pretium posuere, massa nulla malesuada nibh, in dictum urna odio et tortor. Fusce suscipit nunc sed eros sollicitudin, ac feugiat risus aliquam. Nulla facilisi.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` ### 3. Simple Accordions — Arrow Left + Title HTML: ```html

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` React: ```jsx import React from 'react'; const AccordionExample3Demo = () => ( <> {/* Variant: Accordion - Arrow Left + Title */}

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

); export default AccordionExample3Demo; ``` Angular: ```html

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` ### 4. Structured Accordions — Background Header & Body HTML: ```html

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` React: ```jsx import React from 'react'; const AccordionExample4Demo = () => ( <> {/* Variant: Accordion - Background Header & Body */}

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

); export default AccordionExample4Demo; ``` Angular: ```html

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

Donec porta turpis ut ipsum tincidunt, sit amet aliquam leo laoreet. Nunc suscipit ligula non arcu convallis, at interdum turpis tincidunt. Cras a turpis eu ipsum dictum lacinia.

``` ### 5. Structured Accordions — With Container HTML: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

``` React: ```jsx import React from 'react'; const AccordionExample5Demo = () => ( <> {/* Variant: Accordion - With Container */}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

); export default AccordionExample5Demo; ``` Angular: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur faucibus, quam negotium tincidunt, magna urna elementum lorem, in porta eros nibh in justo.

Aenean feugiat tellus et eros aliquam, et elementum ex fermentum. Sed interdum velit quis dui cursus, sit amet iaculis odio eleifend.

In hac habitasse platea dictumst. Curabitur vel urna non turpis efficitur condimentum. Nam consequat, est sit amet pharetra volutpat, elit lacus varius eros, eu pellentesque.

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.