Accordion

<Accordion type='single' collapsible>
  <AccordionItem value='item-1'>
    <AccordionTrigger>할인서비스 제외 대상</AccordionTrigger>
    <AccordionContent>
      <ul>
        <li>
          무이자할부 이용금액, 단기카드대출(현금서비스), 장기카드대출(카드론),
          상품권 및 선불카드(선불전자지급수단 포함) 구입·충전금액, 아파트관리비,
          초·중·고등학교 납입금 전체, 정부지원금(보육료/유치원보조비/바우처 이용금액
          등), 대학(대학원)등록금, 각종 세금, 공과금(전기/수도 등),
          4대 사회보험료(건강/연금/고용/산재), 각종 수수료 및 이자, 연체료, 연회비,
          교통요금, 무승인전표(자판기, 터널통행료, 항공기내 이용 등), 취소금액
        </li>
      </ul>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value='item-2'>
    <AccordionTrigger>전월 이용실적 기준</AccordionTrigger>
    <AccordionContent>
      <ul>
        <li>
          전월 1일 ~ 말일(승인시점 기준) 'KB국민 My WE:SH 카드' 일시불 및
          할부 승인금액 기준
        </li>
        <li>해외 이용금액은 전월 1일 ~ 말일까지 일시불 매입완료 기준</li>
        <li>취소금액은 취소전표가 KB국민카드에 접수된 월의 실적에서 차감</li>
      </ul>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value='item-3'>
    <AccordionTrigger>선택서비스 안내사항</AccordionTrigger>
    <AccordionContent>
      <ul>
        <li>선택서비스 변경 시 신청일 기준 다음달 1일부터 적용(월 단위 제공)</li>
        <li>변경 방법 : 모바일앱/홈페이지/고객센터(☎1588-1688)</li>
      </ul>
    </AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion.Root type="single" defaultValue="item-2">
	<Accordion.Item value="item-1">…</Accordion.Item>
	<Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

<Accordion.Root type="single" collapsible>
	<Accordion.Item value="item-1">…</Accordion.Item>
	<Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

<Accordion.Root type="multiple">
	<Accordion.Item value="item-1">…</Accordion.Item>
	<Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

// index.jsx
import { Accordion } from "@confy-ui/react/primitives";
import { ChevronDownIcon } from "@confy-ui/react/icons";
import "./styles.css";

export default () => (.
	<Accordion.Root type="single">
		<Accordion.Item value="item-1">
			<Accordion.Header>
				<Accordion.Trigger className="AccordionTrigger">
					<span>트리거 텍스트</span>
					<ChevronDownIcon className="AccordionChevron" aria-hidden />
				</Accordion.Trigger>
			</Accordion.Header>
			<Accordion.Content>…</Accordion.Content>
		</Accordion.Item>
	</Accordion.Root>
);

/* styles.css */
.AccordionChevron {
	transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
	transform: rotate(180deg);
}

<Accordion.Root orientation="horizontal">
	<Accordion.Item value="item-1">…</Accordion.Item>
	<Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

// index.jsx
import { Accordion } from "@confy-ui/primitives";
import "./styles.css";

export default () => (
	<Accordion.Root type="single">
		<Accordion.Item value="item-1">
			<Accordion.Header>…</Accordion.Header>
			<Accordion.Content className="AccordionContent">…</Accordion.Content>
		</Accordion.Item>
	</Accordion.Root>
);

/* styles.css */
.AccordionContent {
	overflow: hidden;
}
.AccordionContent[data-state="open"] {
	animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
	animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes slideUp {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}