templates/includes/blocks/accordion.html.twig line 1

  1. <div class="accordion accordion--{% if content.inverted %}inverted {% else %}default {% endif %}
  2.     {{ content.top }} {{ content.bottom }}" x-data="accordion">
  3.     <div class="accordion__container">
  4.         <div class="accordion__list">
  5.             {% for item in content.subblocks %}
  6.                 <div class="accordion__item" x-data="accordionitem" @click="open = !open"{% if schema|default(null) == 'faq' %} itemscope itemtype="https://schema.org/Question"{% endif %}>
  7.                     <div class="accordion__head">
  8.                         <div class="accordion__toggle">
  9.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  10.                                 <path vector-effect="non-scaling-stroke" d="M24.5 4.5V44.5" stroke="currentColor"
  11.                                       stroke-linecap="round" stroke-linejoin="round" x-show="!open"/>
  12.                                 <path vector-effect="non-scaling-stroke" d="M44.5 24.5H4.5" stroke="currentColor"
  13.                                       stroke-linecap="round" stroke-linejoin="round"/>
  14.                             </svg>
  15.                         </div>
  16.                         <div class="accordion__title h4 {% if item.accordionItemTitleMobile %}desktop-only {% endif %}"{% if schema|default(null) == 'faq' %} itemprop="name"{% endif %}>
  17.                             {{ item.accordionItemTitle|raw }}
  18.                         </div>
  19.                         {% if item.accordionItemTitleMobile %}
  20.                             <div class="accordion__title h4 mobile-only">
  21.                                 {{ item.accordionItemTitleMobile|raw }}
  22.                             </div>
  23.                         {% endif %}
  24.                     </div>
  25.                     <div class="accordion__collapse" x-show="open" x-collapse @click.stop=""{% if schema|default(null) == 'faq' %} itemprop="suggestedAnswer acceptedAnswer" itemscope itemtype="https://schema.org/Answer"{% endif %}>
  26.                         <div class="accordion__text"{% if schema|default(null) == 'faq' %} itemprop="text"{% endif %}>
  27.                             {{ item.accordionItemText|raw }}
  28.                         </div>
  29.                        {% if item.accordionItemActionLink != null %}
  30.                             <div class="accordion__actions">
  31.                                 {% if item.accordionItemButtonType == 'box' %}
  32.                                     <a href="{{ item.accordionItemActionLink }}"
  33.                                        class="button button--{{ item.accordionItemButtonColor }}
  34.                                               button--size-{{ item.accordionItemButtonSize }}">
  35.                                         <span class="button__inner">{{ item.accordionItemButtonLabel }}</span>
  36.                                     </a>
  37.                                 {% elseif item.accordionItemButtonType == 'text' %}
  38.                                     <a href="{{ item.accordionItemActionLink }}"
  39.                                        class="text-button text-button--{{ item.accordionItemTextButtonColor }}
  40.                                         {% if item.uppercase %} uppercase {% endif %}">
  41.                                             {{ item.accordionItemButtonLabel }}
  42.                                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  43.                                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  44.                                                   stroke-linecap="round" stroke-linejoin="round"/>
  45.                                         </svg>
  46.                                     </a>
  47.                                 {% endif %}
  48.                             </div>
  49.                         {% endif %}
  50.                     </div>
  51.                 </div>
  52.             {% endfor %}
  53.         </div>
  54.     </div>
  55. </div>