accordion.html.twig in Examples for Developers 8

Template file for js_example module.

File

js_example/templates/accordion.html.twig

{#

/**
 * @file
 * Template file for js_example module.
 */
#}
<div class="accordionWrapper">
  <div class="accordionItem open">
    <h2 class="accordionItemHeading">About accordions</h2>
    <div class="accordionItemContent">
      <p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
      <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>
  </div>

  <div class="accordionItem close">
    <h2 class="accordionItemHeading">Accordion items</h2>
    <div class="accordionItemContent">
      <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
      <p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
      <ul>
        <li>List item #1</li>
        <li>List item #2</li>
        <li>List item #3</li>
      </ul>
    </div>
  </div>

  <div class="accordionItem close">
    <h2 class="accordionItemHeading">How to use a JavaScript accordion</h2>
    <div class="accordionItemContent">
      <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
    </div>
  </div>
</div>