Getting Started

Foundations

Accessibility

Layout

CSS Utilities

Accordion

Introduction

Using the default <Collapse> behavior to create an accordion. The collapse is used to show and hide content. With a few classes, buttons or anchors are used as triggers that are mapped to specific toggle elements.

The accordion component is created by extending the default collapse behavior. It's used to toggle the visibility of content.

Using accordion to display the content of Claim, Skip and Flag actions in bidding screens, or display the frequently asked questions (FAQs).

Toggle Header - Used as triggers that mapped to specific toggle elements.
Card Body - The content inside the card body is flexible.

Examples

Custom Toggle Header

Often used to the frequently asked questions to display a question in toggle header and an answer in the card body.

() => {
  const CustomToggle = ({ eventKey, children }) => {
    const [open, setOpen] = useState(false);
    const handleClick = useAccordionToggle(eventKey, () => setOpen(!open));
    return (
      <div
        className="Button Button--large u-border u-borderTransparent u-flex u-alignItemsCenter u-justifyContentBetween u-cursorPointer"
        onClick={handleClick}
      >
        {children}
        <div className="u-marginLeftTiny u-inlineBlock u-lineHeightNone">
          <Icon
            name="arrowDown"
            className={classNames(
              open && 'u-rotate180'
            )}
            size="extraSmall"
          />
        </div>
      </div>
    );
  };
  return (
    <Accordion style={{ maxWidth: 300 }}>
      <div className="u-marginBottomSmall u-border u-backgroundWhite u-roundedMedium u-overflowHidden">
        <CustomToggle eventKey="0">
          <div className="u-fontMedium">Label</div>
        </CustomToggle>
        <Accordion.Collapse eventKey="0">
          <div className="u-borderTop u-borderTopLighter u-marginHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </Accordion.Collapse>
      </div>
    </Accordion>
  );
};

() => {
  const CustomToggle = ({ eventKey, children }) => {
    const [open, setOpen] = useState(false);
    const handleClick = useAccordionToggle(eventKey, () => setOpen(!open));
    return (
      <div
        className="Button Button--large u-border u-borderTransparent u-flex u-alignItemsCenter u-justifyContentBetween u-cursorPointer"
        onClick={handleClick}
      >
        {children}
        <div className="u-marginLeftTiny u-inlineBlock u-lineHeightNone">
          <Icon
            name="arrowDown"
            className={classNames(
              open && 'u-rotate180'
            )}
            size="extraSmall"
          />
        </div>
      </div>
    );
  };
  return (
    <Accordion style={{ maxWidth: 300 }}>
      <div className="u-marginBottomSmall u-border u-backgroundWhite u-roundedMedium u-overflowHidden">
        <CustomToggle eventKey="0">
          <div className="u-fontMedium">Label</div>
        </CustomToggle>
        <Accordion.Collapse eventKey="0">
          <div className="u-borderTop u-borderTopLighter u-marginHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </div>
        </Accordion.Collapse>
      </div>
    </Accordion>
  );
};

Button Toggle Header

Using similar design as a button, this example used to displays the content and shows more information about actions.

Primary

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-roundedMedium u-backgroundWhite u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-backgroundPrimary u-textWhite u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-border u-borderLighter u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-roundedMedium u-backgroundWhite u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-backgroundPrimary u-textWhite u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-border u-borderLighter u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

Secondary

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-border u-borderLighter u-backgroundWhite u-roundedMedium u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-backgroundLightest u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-borderTop u-borderTopLighter u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-border u-borderLighter u-backgroundWhite u-roundedMedium u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-backgroundLightest u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-borderTop u-borderTopLighter u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

White outline

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-border u-borderLighter u-backgroundWhite u-roundedMedium u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-borderTop u-borderTopLighter u-marginHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

() => (
  <Accordion style={{ maxWidth: 300 }}>
    <div className="u-marginBottomSmall u-border u-borderLighter u-backgroundWhite u-roundedMedium u-overflowHidden">
      <Accordion.Toggle eventKey="0">
        <div className="Button u-border u-borderTransparent u-textUppercase u-flex u-alignItemsCenter u-justifyContentCenter">
          <Icon name="chatBubbles" className="u-marginRightTiny" />
          <span>Label</span>
        </div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <div className="u-borderTop u-borderTopLighter u-marginHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </Accordion.Collapse>
    </div>
  </Accordion>
);

Collapse

() => {
  const [toggle, setToggle] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setToggle(!toggle)}>Toggle me</Button>
      <Collapse in={toggle}>
        <div>
          <div className="u-border u-backgroundWhite u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray u-marginTopSmall">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </div>
        </div>
      </Collapse>
    </>
  );
};

() => {
  const [toggle, setToggle] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setToggle(!toggle)}>Toggle me</Button>
      <Collapse in={toggle}>
        <div>
          <div className="u-border u-backgroundWhite u-paddingHorizontalSmall u-roundedBottomMedium u-paddingVerticalExtraSmall u-textGray u-marginTopSmall">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </div>
        </div>
      </Collapse>
    </>
  );
};

Design Reference

Two or more primary accordion components should not be placed next to each other. Different than a primary accordion component, two or more secondary accordion components can be used in one layout.

Don't

API

Accordion

import { Accordion } from '@ahaui/react'Copy import code for the Accordion component

Name	Type	Default	Description
activeKey	string		controlled by: `onSelect`, initial prop: `defaultActivekey` The current active key that corresponds to the currently expanded card

Accordion.Toggle

import { Accordion } from '@ahaui/react'Copy import code for the Accordion component

Name	Type	Description
eventKey required	string	A key that corresponds to the collapse component that gets triggered when this has been clicked.
onClick	function	A callback function for when this component is clicked
children required	element	Children prop should only contain a single child, and is enforced as such

Accordion.Collapse

import { Accordion } from '@ahaui/react'Copy import code for the Accordion component

Name	Type	Default	Description
eventKey required	string		A key that corresponds to the toggler that triggers this collapse's expand or collapse.
children required	element		Children prop should only contain a single child, and is enforced as such

Collapse

import { Collapse } from '@ahaui/react'Copy import code for the Collapse component

Name	Type	Default	Description
timeout	number	`300`	Duration of the collapse animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled
dimension	`'height'` \| `'width'` \| function	`'height'`	The dimension used when collapsing, or a function that returns the dimension Note: Bootstrap only partially supports 'width'! You will need to supply your own CSS animation for the `.width` CSS class.
getDimensionValue	function	`element.offsetWidth \| element.offsetHeight`	Function that returns the height or width of the animating DOM node Allows for providing some custom logic for how much the Collapse component should animate in its specified dimension. Called with the current dimension prop value and the DOM node.

useAccordionToggle

import { useAccordionToggle } from '@ahaui/react';

const decoratedOnClick = useAccordionToggle(eventKey, onClick);

Accordion

Introduction#

Examples#

Custom Toggle Header#

Button Toggle Header#

Primary#

Secondary#

White outline#

Collapse#

Design Reference#

API#

Accordion#

Accordion.Toggle#

Accordion.Collapse#

Collapse#

useAccordionToggle#

Introduction

Examples

Custom Toggle Header

Button Toggle Header

Primary

Secondary

White outline

Collapse

Design Reference

API

Accordion

Accordion.Toggle

Accordion.Collapse

Collapse

useAccordionToggle