Skip to main content

Accordion

Accordion in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Simple Accordion​

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="Card 2"
    initialExpanded>
    Card initially open
  </AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

The Accordion and AccordionCard components are available from the @jutro/components package. Only AccordionCard can be placed inside Accordion. AccordionCard always has to have set either a title or dangerouslyRenderHeader prop but the usage of the latter is not recommended.

Accordion appearance customization​

<Accordion
  chevronPosition="left"
  hideDivider>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard title="Card 2">Test card 2</AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Using the hideDivider property allows you to hide all of the separators. Chevron placement is limited to right and left options. Both are set on the Accordion level.

Accordion Cards with custom headers​

.customHeaderContainer {
  display: flex;
  align-items: center;
}

.customHeaderIcon {
  margin-right: 8px;
}
import {
  Accordion,
  AccordionCard,
  useAccordionCardState,
} from '@jutro/components';

const CustomHeader1 = () => {
  const { expanded, title } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? `Expanded ${title}` : `Collapsed ${title}`}
    </div>
  );
};

const CustomHeader2 = () => {
  const { expanded } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? (
        <Icon
          icon="gw-add"
          className={styles.customHeaderIcon}
        />
      ) : (
        <Icon
          icon="gw-alarm"
          className={styles.customHeaderIcon}
        />
      )}
      Custom rendered card header
    </div>
  );
};

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="custom card header"
    dangerouslySetHeader={<CustomHeader1 />}>
    I'm basic but custom
  </AccordionCard>
  <AccordionCard
    dangerouslySetHeader={<CustomHeader2 />}
    initialExpanded
    onFocus={() =>
      console.log(
        "I'm a custom attribute of a button added to be triggered on accordion card button focus"
      )
    }>
    I'm so custom
  </AccordionCard>
</Accordion>;

dangerouslySetHeader allows greater flexibility with header content but we recommend that you do not overuse this property.

Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.