Accordiondemo

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 ===
    <ul class="accordion dark" data-role="accordion">
        ...
    </ul>

Javascript

Include in head accordion.js