AccordionContent

Accordion Content component (collapsible content area)

import { AccordionContent } from "@tetherto/mdk-react-devkit";

AccordionContent exposes no documented props.

Usage

Collapsible panel with a title trigger and animated content area. Exports both a high-level Accordion wrapper and composable primitives (AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent).

Notes

Accordion wraps the primitives with type="multiple" and a single hard-coded item value; use AccordionRoot directly when you need multi-item control.
toggleIconPosition="right" swaps to PlusIcon/MinusIcon style; "left" uses ChevronDown/ChevronRight.

Example

/** * Runnable example for Accordion. */import {  Accordion,  AccordionContent,  AccordionItem,  AccordionRoot,  AccordionTrigger,} from '@tetherto/mdk-react-devkit'export const AccordionExample = () => (  <div className="mdk-example-col">    <Accordion title="Basic Accordion" isOpened>      <p>Collapsed/expanded content goes here. Supports any React node as children.</p>    </Accordion>    <Accordion title="Solid Background" solidBackground>      <p>This variant uses a solid background for the accordion panel.</p>    </Accordion>    <AccordionRoot type="multiple">      <AccordionItem value="item-1">        <AccordionTrigger toggleIconPosition="right">Custom trigger position</AccordionTrigger>        <AccordionContent>          <p>Content for item 1 using low-level Accordion primitives.</p>        </AccordionContent>      </AccordionItem>      <AccordionItem value="item-2">        <AccordionTrigger>Another section</AccordionTrigger>        <AccordionContent>          <p>Content for item 2.</p>        </AccordionContent>      </AccordionItem>    </AccordionRoot>  </div>)