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;