Accordion

Basic usage

TIP

Don't specify padding and margin for Accordion.Item.Collapse, this will break the animation.

tsx

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, onChange] = React.useState([0]);

  return (
    <Accordion value={value} onChange={(value) => onChange(value)}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle pb={2}>
            <Flex alignItems='center'>
              <Accordion.Item.Chevron mr={2} />
              <Text size={300} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
            </Flex>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            <Box p='12px 24px 24px'>{`Hello Section ${index + 1}`}</Box>
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Flex, Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, onChange] = React.useState([0]);

  return (
    <Accordion value={value} onChange={(value) => onChange(value)}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle pb={2}>
            <Flex alignItems='center'>
              <Accordion.Item.Chevron mr={2} />
              <Text size={300} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
            </Flex>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            <Box p='12px 24px 24px'>{`Hello Section ${index + 1}`}</Box>
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

One section opening

value can take both values: single and array of values. By changing it, you change the behavior of the component.

tsx

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, onChange] = React.useState(null); // or []
  return (
    <Accordion value={value} onChange={onChange}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle pb={2}>
            <Flex alignItems='center'>
              <Accordion.Item.Chevron mr={2} />
              <Text size={300} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
            </Flex>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            <Box p='12px 24px 24px'>{`Hello Section ${index + 1}`}</Box>
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, onChange] = React.useState(null); // or []
  return (
    <Accordion value={value} onChange={onChange}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle pb={2}>
            <Flex alignItems='center'>
              <Accordion.Item.Chevron mr={2} />
              <Text size={300} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
            </Flex>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            <Box p='12px 24px 24px'>{`Hello Section ${index + 1}`}</Box>
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

Custom trigger

You can add your own styles to the trigger or change its tag.

tsx

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Box } from 'intergalactic/flex-box';
import Button from '@semcore/button';

const Demo = () => (
  <Accordion>
    {[...new Array(3)].map((_, index) => (
      <Accordion.Item value={index} key={index}>
        <Accordion.Item.Toggle w='100%' tabIndex={-1}>
          <Button use='tertiary' theme='muted' size='l'>
            <Button.Addon>
              <Accordion.Item.Chevron />
            </Button.Addon>
            <Button.Text tag='h3' my={0} inline>{`Section ${index + 1}`}</Button.Text>
          </Button>
        </Accordion.Item.Toggle>
        <Accordion.Item.Collapse>
          <Box p='12px 36px'>{`Hello Section ${index + 1}`}</Box>
        </Accordion.Item.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>
);

export default Demo;

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Box } from 'intergalactic/flex-box';
import Button from '@semcore/button';

const Demo = () => (
  <Accordion>
    {[...new Array(3)].map((_, index) => (
      <Accordion.Item value={index} key={index}>
        <Accordion.Item.Toggle w='100%' tabIndex={-1}>
          <Button use='tertiary' theme='muted' size='l'>
            <Button.Addon>
              <Accordion.Item.Chevron />
            </Button.Addon>
            <Button.Text tag='h3' my={0} inline>{`Section ${index + 1}`}</Button.Text>
          </Button>
        </Accordion.Item.Toggle>
        <Accordion.Item.Collapse>
          <Box p='12px 36px'>{`Hello Section ${index + 1}`}</Box>
        </Accordion.Item.Collapse>
      </Accordion.Item>
    ))}
  </Accordion>
);

export default Demo;

Selected element styles

To find out whether an element is selected or not, pass the function into the body of the element.

tsx

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');

const Demo = () => {
  return (
    <>
      <style>
        {`
          .styled-accordion-item {
            background-color: var(--intergalactic-bg-secondary-neutral);
            padding: var(--intergalactic-spacing-2x) var(--intergalactic-spacing-3x);
            color: var(--intergalactic-text-primary);
          }
          .styled-accordion-item:first-of-type {
            border-radius: var(--intergalactic-control-rounded) var(--intergalactic-control-rounded) 0 0;
          }
          .styled-accordion-item:last-of-type {
            border-radius: 0 0 var(--intergalactic-control-rounded) var(--intergalactic-control-rounded);
          }
          .styled-accordion-item-selected {
            background-color: var(--intergalactic-bg-secondary-neutral-hover);
            color: #000;
          }
        `}
      </style>
      <Accordion>
        {[...new Array(3)].map((_, index) => (
          <Accordion.Item value={index} key={index}>
            {({ selected }) => (
              <>
                <Accordion.Item.Toggle
                  tag={Flex}
                  alignItems='center'
                  className={cn(
                    'styled-accordion-item',
                    selected && 'styled-accordion-item-selected',
                  )}
                >
                  <Accordion.Item.Chevron mr={2} />
                  <Text size={200} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
                </Accordion.Item.Toggle>
                <Accordion.Item.Collapse>
                  <Box p='12px 32px'>{`Hello Section ${index + 1}`}</Box>
                </Accordion.Item.Collapse>
              </>
            )}
          </Accordion.Item>
        ))}
      </Accordion>
    </>
  );
};

export default Demo;

import React from 'react';
import Accordion from 'intergalactic/accordion';
import { Text } from 'intergalactic/typography';
import { Box, Flex } from 'intergalactic/flex-box';

const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');

const Demo = () => {
  return (
    <>
      <style>
        {`
          .styled-accordion-item {
            background-color: var(--intergalactic-bg-secondary-neutral);
            padding: var(--intergalactic-spacing-2x) var(--intergalactic-spacing-3x);
            color: var(--intergalactic-text-primary);
          }
          .styled-accordion-item:first-of-type {
            border-radius: var(--intergalactic-control-rounded) var(--intergalactic-control-rounded) 0 0;
          }
          .styled-accordion-item:last-of-type {
            border-radius: 0 0 var(--intergalactic-control-rounded) var(--intergalactic-control-rounded);
          }
          .styled-accordion-item-selected {
            background-color: var(--intergalactic-bg-secondary-neutral-hover);
            color: #000;
          }
        `}
      </style>
      <Accordion>
        {[...new Array(3)].map((_, index) => (
          <Accordion.Item value={index} key={index}>
            {({ selected }) => (
              <>
                <Accordion.Item.Toggle
                  tag={Flex}
                  alignItems='center'
                  className={cn(
                    'styled-accordion-item',
                    selected && 'styled-accordion-item-selected',
                  )}
                >
                  <Accordion.Item.Chevron mr={2} />
                  <Text size={200} tag='h3' my={0}>{`Section ${index + 1}`}</Text>
                </Accordion.Item.Toggle>
                <Accordion.Item.Collapse>
                  <Box p='12px 32px'>{`Hello Section ${index + 1}`}</Box>
                </Accordion.Item.Collapse>
              </>
            )}
          </Accordion.Item>
        ))}
      </Accordion>
    </>
  );
};

export default Demo;

Accessibility

Writing code

CSS Injection

Basic usage

One section opening

Custom trigger

Selected element styles

Accessibility

CSS Injection

Accordion

Basic usage ​

One section opening ​

Custom trigger ​

Selected element styles ​

Basic usage

One section opening

Custom trigger

Selected element styles