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

  • 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.

  • Mea in soleat altera

    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.

  • Qui impetus tibique maluisset ne, omnes

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

<ul class="accordion">
  <li>
    <span class="accordion__title">Ferri dictas abhorreant</span>
    <div class="accordion__hidden">
      <p>
        Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
      </p>
    </div>
  </li>
  <li>
    <span class="accordion__title">Id sit explicari</span>
    <div class="accordion__hidden">
      <p>
        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.
      </p>
    </div>
  </li>
  <li>
    <span class="accordion__title">Mea in soleat altera</span>
    <div class="accordion__hidden">
      <p>
        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.
      </p>
      <p>
        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.
      </p>
    </div>
  </li>
  <li>
    <span class="accordion__title">Qui impetus tibique maluisset ne, omnes</span>
    <div class="accordion__hidden">
      <p>
        Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
      </p>
    </div>
  </li>
</ul>
      

Single block open

  • 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
<ul class="accordion" data-single-focus="">
  <li>
    <span class="accordion__title">Ferri dictas abhorreant</span>
    <div class="accordion__hidden">
      <p>
        Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
      </p>
    </div>
  </li>
  <li>
    <span class="accordion__title">Id sit explicari</span>
    <div class="accordion__hidden">
      <p>
        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.
      </p>
      <ul>
        <li>
          Qui impetus tibique
        </li>
        <li>
          Unordered list, inner 
          <ul>
            <li>
              Qui impetus tibique
            </li>
            <li>
              maluisset ne, omnes
            </li>
            <li class="no-li">
              No bullet point, overriden
            </li>
          </ul>
        </li>
        <li>
          persequeris in vis.
        </li>
        <li>
          Ordered list, inner 
          <ol>
            <li>
              Qui impetus tibique
            </li>
            <li>
              persequeris in vis.
            </li>
          </ol>
        </li>
      </ul>
      <ol>
        <li>
          Qui impetus tibique
        </li>
        <li>
          Ordered list, inner 
          <ol>
            <li>
              Qui impetus tibique
            </li>
            <li>
              Ordered list, inner-inner 
              <ol>
                <li class="no-li">
                  No bullet point, overriden
                </li>
                <li>
                  maluisset ne, omnes
                </li>
                <li>
                  persequeris in vis.
                </li>
              </ol>
            </li>
            <li>
              Ticked list, inner-inner 
              <ul class="ticked-list">
                <li>
                  Qui impetus tibique
                </li>
                <li class="no-li">
                  No bullet point, overriden
                </li>
                <li>
                  persequeris in vis.
                </li>
              </ul>
            </li>
            <li>
              persequeris in vis.
            </li>
          </ol>
        </li>
        <li>
          persequeris in vis.
        </li>
        <li>
          Unordered list, inner 
          <ul>
            <li>
              Qui impetus tibique
            </li>
            <li>
              maluisset ne, omnes
            </li>
            <li>
              persequeris in vis.
            </li>
          </ul>
        </li>
        <li>
          Ticked list, inner 
          <ul class="ticked-list">
            <li>
              Qui impetus tibique
            </li>
            <li>
              maluisset ne, omnes
            </li>
            <li>
              persequeris in vis.
            </li>
          </ul>
        </li>
      </ol>
    </div>
  </li>
  <li class="accordion__visible">
    <span class="accordion__title">Qui impetus tibique maluisset ne, omnes</span>
    <div class="accordion__hidden">
      <p>
        Ex causae vocent viderer qui. Ei per semper principes. Epicuri sententiae usu at. Te commodo suscipit definitiones est.
      </p>
    </div>
  </li>
  <li>
    <span class="accordion__title">Mea in soleat altera</span>
    <div class="accordion__hidden">
      <ol class="steps">
        <li>
          <h2>
            Headline
          </h2>
          <p>
            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
          </p>
        </li>
        <li>
          <h2>
            Headline
          </h2>
          <p>
            Cum ceteris in veneratione <strong>tui montes</strong>, 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.
          </p>
        </li>
        <li>
          <h2>
            Headline
          </h2>
          <p>
            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.
          </p>
          <ul>
            <li>
              Item
            </li>
            <li>
              Item
            </li>
          </ul>
          <ul class="ticked-list">
            <li>
              Item
            </li>
            <li>
              Item
            </li>
          </ul>
          <ol>
            <li>
              Item
            </li>
            <li>
              Item
            </li>
          </ol>
        </li>
      </ol>
    </div>
  </li>
</ul>