Accordion

  • frame 1

    frame 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta condimentum sem sed commodo.

    subcontent 1

  • frame 2

    frame 2

    Curabitur porta condimentum sem sed commodo. Praesent vestibulum, libero eget lacinia pretium, metus augue dapibus odio, nec placerat mauris justo non ante.
    subcontent 2
  • frame 3

    frame 3

    Maecenas adipiscing nulla sed sem molestie quis pulvinar lectus convallis. Nam tortor arcu, gravida nec tristique sit amet, pretium sagittis eros. Curabitur at nisi ut ligula ornare euismod.
  • frame 4

    frame 4

    Ut vitae tortor eget elit dictum dictum. Ut porttitor, ante non blandit gravida, felis risus feugiat neque, eu tincidunt neque ante at urna. Maecenas nec felis nulla.

Accordion Dark

  • frame 1

    frame 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta condimentum sem sed commodo.
  • frame 2

    frame 2

    Curabitur porta condimentum sem sed commodo. Praesent vestibulum, libero eget lacinia pretium, metus augue dapibus odio, nec placerat mauris justo non ante.
  • frame 3

    frame 3

    Maecenas adipiscing nulla sed sem molestie quis pulvinar lectus convallis. Nam tortor arcu, gravida nec tristique sit amet, pretium sagittis eros. Curabitur at nisi ut ligula ornare euismod.
  • frame 4

    frame 4

    Ut vitae tortor eget elit dictum dictum. Ut porttitor, ante non blandit gravida, felis risus feugiat neque, eu tincidunt neque ante at urna. Maecenas nec felis nulla.

Component definition

    <ul class="accordion" data-role="accordion">
        <li class="active">
            <a href="#"> Caption </a>
            <div> ...content... </div>
        </li>
        ...
        <li>
            <a href="#"> Caption </a>
            <div> ...content... </div>
        </li>
    </ul>
    <!-- Dark theme -->
    <ul class="accordion dark" data-role="accordion">
        ...
    </ul>

Javascript

Include in head accordion.js