Accordion

Before using this component, you might want to read our article about Accordions first. Please use the code samples below, not the generated code! The component adds a close button into the structure that isn't required in the initial markup.

Simple accordion

Example:
  • Ferri dictas abhorreant

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit

    Qui impetus tibique maluisset ne, omnes persequeris in vis. Ei his sonet suscipit oportere, harum debitis consequuntur ei vix. Cu semper omnium scaevola eum, mei an ferri honestatis referrentur. Eu vim invidunt dissentiet, ne ludus repudiare necessitatibus vim. Enim errem conceptam mel ex, epicuri scaevola complectitur nam ne.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet tempore facilis omnis iusto quod minima suscipit

    Ferri dictas abhorreant eos cu, id doming impetus oporteat vis. Id sea fuisset accusam, no vim graece audiam. Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

    Per te sale ocurreret sententiae, no eam omnesque argumentum. Mea in soleat altera. Has ad agam fugit. Sumo civibus ius an, no mel vidit feugait. Et lorem decore deterruisset vix, quidam molestiae et vim, eos atomorum persecuti at. Te pro aliquip recusabo senserit, duo utinam hendrerit voluptatibus in, pro stet saperet noluisse id.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet tempore facilis omnis iusto quod minima suscipit, consequatur odio, voluptas sequi dolore repellat

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

Single-block open accordion

Example:
  • Ferri dictas abhorreant

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Id sit explicari

    Qui impetus tibique maluisset ne, omnes persequeris in vis. Ei his sonet suscipit oportere, harum debitis consequuntur ei vix. Cu semper omnium scaevola eum, mei an ferri honestatis referrentur. Eu vim invidunt dissentiet, ne ludus repudiare necessitatibus vim. Enim errem conceptam mel ex, epicuri scaevola complectitur nam ne.

    • Qui impetus tibique
    • Unordered list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • No bullet point, overriden
    • persequeris in vis.
    • Ordered list, inner
      1. Qui impetus tibique
      2. persequeris in vis.
    1. Qui impetus tibique
    2. Ordered list, inner
      1. Qui impetus tibique
      2. Ordered list, inner-inner
        1. No bullet point, overriden
        2. maluisset ne, omnes
        3. persequeris in vis.
      3. Ticked list, inner-inner
        • Qui impetus tibique
        • No bullet point, overriden
        • persequeris in vis.
      4. persequeris in vis.
    3. persequeris in vis.
    4. Unordered list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • persequeris in vis.
    5. Ticked list, inner
      • Qui impetus tibique
      • maluisset ne, omnes
      • persequeris in vis.
  • Qui impetus tibique maluisset ne, omnes

    Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.

  • Mea in soleat altera

    1. Headline

      Petierunt uti sibi concilium totius Galliae in diem certam indicere.

    2. Headline

      Cum ceteris in veneratione tui montes , nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

    3. Headline

      Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

      • Item
      • Item
      • Item
      • Item
      1. Item
      2. Item