@ag.ds-next/accordion
Advanced tools
--- title: Accordion description: Accordions help users see only the content they need, by expanding and collapsing sections of content. group: Layout ---
A singular method of expanding and collapsing a piece of content with a title.
<Accordion>
<AccordionItem title="Accordion">
<AccordionItemContent>
<Text>This is some text inside an Accordion</Text>
</AccordionItemContent>
</AccordionItem>
</Accordion>
It is common for multiple AccordionItems to appear together. Grouped AccordionItems should not influence eachother - Meaning if one opens, it should not cause another to close.
<Accordion>
<AccordionItem title="Accordion 1">
<AccordionItemContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a libero
vel dolor sollicitudin pretium quis quis mi. Fusce sapien mi, efficitur
sit amet ex et, bibendum efficitur odio. Ut nec gravida metus, nec
suscipit nulla. Donec est nulla, dictum sed ultricies congue, suscipit
at velit. Integer ut leo lectus. Nullam volutpat ex quis imperdiet
scelerisque. Etiam ultrices et nisi eget pulvinar. Cras ultrices lectus
ut nisl gravida, eu rutrum sem luctus. Praesent vulputate eu dolor
commodo tempor. Sed nec lorem consectetur, maximus justo at, tincidunt
quam. Suspendisse pellentesque accumsan accumsan. Cras in odio leo. Nam
pharetra, lorem eget aliquam gravida, felis ex tempor sapien, a ornare
leo nulla eget magna. Quisque tempus ipsum eu elit bibendum, nec
bibendum ligula posuere. Nam porttitor est eros, ac maximus nisl euismod
nec.
</p>
</AccordionItemContent>
</AccordionItem>
<AccordionItem title="Accordion 2">
<AccordionItemContent>
<Body>
<p>
Curabitur urna erat, ornare in nulla vitae, tempor porttitor dolor.
Nam luctus fermentum tellus, vitae maximus turpis viverra eget.
Phasellus hendrerit tortor eu mauris ultricies congue. Suspendisse
cursus, purus quis viverra pharetra, purus quam hendrerit magna,
condimentum cursus massa nisi ut est. Mauris in tristique augue.
Phasellus tellus ante, fermentum eget fringilla eget, tempor nec nunc.
Ut nec dui vitae ex dignissim tempus ac et ante. Donec imperdiet
suscipit leo. Suspendisse mattis quis nisl id mattis. Sed dictum
tempus nibh, quis feugiat magna efficitur in. Sed vulputate et dui eu
malesuada.
</p>
</Body>
</AccordionItemContent>
</AccordionItem>
<AccordionItem title="Accordion 3">
<AccordionItemContent>
<Body>
<p>
Curabitur urna erat, ornare in nulla vitae, tempor porttitor dolor.
Nam luctus fermentum tellus, vitae maximus turpis viverra eget.
Phasellus hendrerit tortor eu mauris ultricies congue. Suspendisse
cursus, purus quis viverra pharetra, purus quam hendrerit magna,
condimentum cursus massa nisi ut est. Mauris in tristique augue.
Phasellus tellus ante, fermentum eget fringilla eget, tempor nec nunc.
Ut nec dui vitae ex dignissim tempus ac et ante. Donec imperdiet
suscipit leo. Suspendisse mattis quis nisl id mattis. Sed dictum
tempus nibh, quis feugiat magna efficitur in. Sed vulputate et dui eu
malesuada.
</p>
</Body>
</AccordionItemContent>
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem title="Edge-to-edge image" isInitiallyOpen>
<img
src="http://placehold.it/800x200"
alt="Placeholder image"
style={{ width: '100%' }}
/>
<AccordionItemContent>
<Text>
In this example, we remove the default padding from the AccordionItem,
in order to achieve the edge-to-edge image above. This Text is wrapped
in the AccordionItemContent component.
</Text>
</AccordionItemContent>
</AccordionItem>
</Accordion>
FAQs
Documentation for this package can be found here: https://design-system.agriculture.gov.au/components/accordion
The npm package @ag.ds-next/accordion receives a total of 9 weekly downloads. As such, @ag.ds-next/accordion popularity was classified as not popular.
We found that @ag.ds-next/accordion demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.