Accordion - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses the <section> tag with the z-accordion HTML custom attribute.

z-accordion ​

The z-accordion is the main parameter used to render the accordion component.

Accordion item
Body text lorem ipsum dolor sit amet

You can also set the size of the accordion item. Default is m. You can also set it as l.

Accordion item
Body text lorem ipsum dolor sit amet

INFO

The open attribute for the detailstag is a boolean attribute. When present, it specifies that the details should be visible (open) to the user. The default value is false.

Accordion item
Body text lorem ipsum dolor sit amet

Check all information about the details tag in here.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Accordion.css" />
Code
html
<section z-accordion accordion-size="l">
  <details>
    <summary>Accordion item</summary>
  </details>

  <main>
    <p> Body text lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </main>
</section>