templates/areas/content-accordion/view.html.twig line 1

Open in your IDE?
  1. {% set id = 'area' ~ info.index %}
  2. <section class="accordion-area container content-block {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ not pimcore_input('anchorTitle').empty ? 'js-anchor-nav__item' : '' }}" {% if not pimcore_input('anchorTitle').empty %}data-anchor-nav-title="{{ pimcore_input('anchorTitle').frontend }}"{% endif %}>
  3.     {% embed 'Includes/editmode-settings.html.twig' %}
  4.         {% block additionalInfo %}
  5.             <div>
  6.                 <label>
  7.                     {{ pimcore_checkbox('titleBlockCentered') }} Center Headline?
  8.                 </label>
  9.             </div>
  10.         {% endblock %}
  11.     {% endembed %}
  12.     <div class="container container-sm">
  13.         {{ include('Includes/title-block-editable.html.twig') }}
  15.         <div id="{{ id }}" class="accordion">
  17.             {% for key in pimcore_iterate_block(pimcore_block('accordion-items', {default: 1})) %}
  18.                 {% if editmode %}
  19.                     <div class="accordion-item js-fade-in p-2">
  20.                         <h4 class="">
  21.                             {{ pimcore_input('title', {
  22.                                 placeholder: 'Accorion Title'
  23.                             }) }}
  24.                         </h4>
  26.                         <div class="wysiwyg">
  27.                             {{ pimcore_wysiwyg('content', {
  28.                                 placeholder: 'Accorion Body'
  29.                             }) }}
  30.                         </div>
  31.                     </div>
  32.                 {% else %}
  33.                     <div class="accordion-item js-fade-in">
  34.                         <div class="accordion-item__header" id="{{ id }}Heading{{ key }}">
  35.                             <a class="{{ key==1 ? '' : 'collapsed' }} accordion-item__header-link"
  36.                                data-toggle="collapse"
  37.                                href="#{{ id }}Collapse{{ key }}"
  38.                                data-target="#{{ id }}Collapse{{ key }}"
  39.                                role="button"
  40.                                aria-expanded="{{ key==1 ? 'true' : 'false' }}"
  41.                                aria-controls="{{ id }}Collapse{{ key }}">
  42.                                 <div class="row align-items-center">
  43.                                     <div class="col">
  44.                                         <h4 class="accordion-item__title">
  45.                                             {{ pimcore_input('title') }}
  46.                                         </h4>
  47.                                     </div>
  48.                                     <div class="col-auto d-flex justify-content-center align-items-center">
  49.                                         <div class="accordion-item__toggle">
  50.                                             <span class="icon icon-arrow-down  accordion-item__toggle-icon" aria-hidden="true"></span>
  51.                                         </div>
  52.                                     </div>
  53.                                 </div>
  54.                             </a>
  55.                         </div>
  57.                         <div id="{{ id }}Collapse{{ key }}"
  58.                              class="collapse {{ key==1 ? 'show' : '' }}"
  59.                              aria-labelledby="{{ id }}Heading{{ key }}">
  60.                             <div class="accordion-item__body">
  61.                                 <div class="wysiwyg">
  62.                                     {{ pimcore_wysiwyg('content') }}
  63.                                 </div>
  64.                             </div>
  65.                         </div>
  66.                     </div>
  68.                 {% endif %}
  69.             {% endfor %}
  70.         </div>
  72.     </div>
  74. </section>