Accordion

@magic-modules/accordion

this is the @magic-modules Accordion component.

shows / hides items in a vertical accordion

installation

npm install @magic-modules/accordion

usage

in a page or Component.

<Accordion  state  key="about"  items="[    { title: 'title text: 'content' },    { title: 'title 2 text: 'content 2' },    {      title: 'title 3      text: [        p('content'),        p('can also be an'),        p(['array ' of ' modules']),        Link({ to: 'https://magic.github.io' }, 'magic.github.io'),      ],    },  ]"  title="optional title"></Accordion>

demo

the example above renders

optional title

  • title

    content

  • title 2

    content 2

css

by default, css is minimal. to adapt the styles for your theme, add (and change) the following object to /assets/theme/{THEME_NAME}/index.mjs

'.Accordion': {  h3: {}, // main title  '.AccordionItem': {    h4: {}, // item title    '.content': {}, // item content    '&.open': {      '.content': {}, // item content if opened    },  },}

source

the source for this page is in the example directory, and gets built and published to github using @magic/core