examples-3.x-dev/modules/js_example/templates/accordion.html.twig

{#
/**
 * @file
 * Default theme implementation for the JavaScript Example accordion.
 *
 * @ingroup themeable
 */
#}

{{ attach_library('js_example/accordion') }}

<div class="accordion-wrapper">
  <div class="accordion-item open">
    <h2 class="accordion-item-header">Lorem ipsum</h2>
    <div class="accordion-item-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ultrices sagittis orci a scelerisque purus. Metus aliquam eleifend mi in. Dictum varius duis at
        consectetur. Eget sit amet tellus cras. Gravida cum sociis natoque penatibus et. Sit amet justo donec enim. Et
        netus et malesuada fames ac turpis. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque
        pulvinar. Sed viverra tellus in hac habitasse platea. Ultricies mi eget mauris pharetra et ultrices neque. Vitae
        auctor eu augue ut lectus arcu bibendum at varius. Suspendisse sed nisi lacus sed viverra tellus in. Vitae
        sapien pellentesque habitant morbi tristique senectus et netus.

        Sem et tortor consequat id porta nibh venenatis cras. Id neque aliquam vestibulum morbi blandit cursus risus at.
        Tempus urna et pharetra pharetra. Arcu non odio euismod lacinia at quis risus sed. Faucibus vitae aliquet nec
        ullamcorper sit amet risus nullam. Leo vel orci porta non pulvinar neque laoreet suspendisse. Ultrices gravida
        dictum fusce ut placerat orci nulla. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Blandit
        turpis cursus in hac habitasse platea dictumst quisque sagittis. Dictum sit amet justo donec enim diam. Id
        ornare arcu odio ut.

        Cursus euismod quis viverra nibh cras pulvinar. Lacus laoreet non curabitur gravida arcu ac tortor dignissim.
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Orci phasellus egestas tellus rutrum tellus. Et
        malesuada fames ac turpis egestas. Penatibus et magnis dis parturient montes nascetur. Cras semper auctor neque
        vitae tempus quam. Quis hendrerit dolor magna eget est lorem ipsum. Vitae congue eu consequat ac felis donec et
        odio pellentesque. Enim nec dui nunc mattis enim. Vitae congue mauris rhoncus aenean vel elit scelerisque
        mauris. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Morbi tempus iaculis urna id volutpat lacus
        laoreet. Consectetur lorem donec massa sapien faucibus et molestie. Orci sagittis eu volutpat odio facilisis
        mauris. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Dui accumsan sit amet nulla. Sed
        augue lacus viverra vitae congue. Donec ac odio tempor orci. Quisque sagittis purus sit amet.

        Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Rhoncus aenean vel elit scelerisque. Sit amet
        justo donec enim diam. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Egestas pretium
        aenean pharetra magna ac placerat vestibulum. Dictum non consectetur a erat. Lectus arcu bibendum at varius vel.
        Mollis nunc sed id semper risus. Orci eu lobortis elementum nibh tellus molestie. Neque vitae tempus quam
        pellentesque nec nam. Nisl condimentum id venenatis a. Dolor sit amet consectetur adipiscing. Amet cursus sit
        amet dictum sit.</p>
      <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>
  </div>

  <div class="accordion-item close">
    <h2 class="accordion-item-header">Cicero</h2>
    <div class="accordion-item-content">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
        nisi ut aliquid ex ea commodi consequatur?</p>
    </div>
  </div>

  <div class="accordion-item close">
    <h2 class="accordion-item-header">Werther</h2>
    <div class="accordion-item-content">
      <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy
        with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss
        of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil
        existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment;
        and yet I feel that I never was a greater artist than now. </p>
    </div>
  </div>
</div>