Akkordeon

Ausklappbare Bereiche können über folgenden Quelltext definiert werden:

• Erster Abschnitt

  Nihil cupiditate officiis natus numquam. Dicta dicta facilis ut veritatis velit minima molestiae. Necessitatibus distinctio consequatur minima facilis. Recusandae pariatur dolor ipsam omnis.

  Consequuntur molestias optio est omnis. Totam facilis dolor vel. Quo fuga enim reprehenderit ut. Dolore ut earum hic ut veritatis. Similique autem et voluptates et. Id et libero voluptatem soluta nesciunt et.

  Impedit sapiente enim saepe molestiae. Beatae quod quo recusandae occaecati enim. Eos nostrum est fugiat eum ex et at. Hic quo libero dicta rerum provident sit. Quia quidem sunt et blanditiis deserunt voluptas perspiciatis. Qui magni impedit odio.

• Zweiter Abschnitt

  • Erster Unterpunkt

    Nihil cupiditate officiis natus numquam. Dicta dicta facilis ut veritatis velit minima molestiae. Necessitatibus distinctio consequatur minima facilis. Recusandae pariatur dolor ipsam omnis.

    Consequuntur molestias optio est omnis. Totam facilis dolor vel. Quo fuga enim reprehenderit ut. Dolore ut earum hic ut veritatis. Similique autem et voluptates et. Id et libero voluptatem soluta nesciunt et.

    Impedit sapiente enim saepe molestiae. Beatae quod quo recusandae occaecati enim. Eos nostrum est fugiat eum ex et at. Hic quo libero dicta rerum provident sit. Quia quidem sunt et blanditiis deserunt voluptas perspiciatis. Qui magni impedit odio.

  • Zweiter Unterpunkt

    Nihil cupiditate officiis natus numquam. Dicta dicta facilis ut veritatis velit minima molestiae. Necessitatibus distinctio consequatur minima facilis. Recusandae pariatur dolor ipsam omnis.

    Consequuntur molestias optio est omnis. Totam facilis dolor vel. Quo fuga enim reprehenderit ut. Dolore ut earum hic ut veritatis. Similique autem et voluptates et. Id et libero voluptatem soluta nesciunt et.

    Impedit sapiente enim saepe molestiae. Beatae quod quo recusandae occaecati enim. Eos nostrum est fugiat eum ex et at. Hic quo libero dicta rerum provident sit. Quia quidem sunt et blanditiis deserunt voluptas perspiciatis. Qui magni impedit odio.

<ul class="accordion">
  <li class="accordion-item">
    <input type="checkbox" class="accordion-item-status" id="accordion-item-toggle-1" checked>
    <label class="accordion-item-title" for="accordion-item-toggle-1">
      Titel von Item 1
    </label>
    <div class="accordion-item-content">
      Inhalt von Item 1
    </div>
  </li>
</ul>