Copy environment

Accordion Module 

<section class="section  accordion-module ">
    <div class="text editor">
        <h2>Accordion title</h2>
        <p>Accordion description</p>
        <div class="accordion js-accordion-group  accordion-module__accordion">
            <div class="accordion__item js-accordion" id="accordion-item-1">
                <a href="#accordion-item-1" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-2">
                <a href="#accordion-item-2" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kuidas toimub kauba tagastamine? </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-3">
                <a href="#accordion-item-3" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kus ma näen transpordikulu?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-4">
                <a href="#accordion-item-4" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kuidas saan katkestada või muuta tellimust?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
 
{% set sectionContent %}
    <div class="text editor">
        {{ data.description }}
        {% include '@accordion' with { data: data.accordion, class: 'accordion-module__accordion', modifier: '' } %}
    </div>
{% endset %}

{% include '@section' with { class: 'accordion-module' } %}

{
  "language": "en-US",
  "data": {
    "accordion": {
      "items": [
        {
          "id": "accordion-item-1",
          "title": "Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-2",
          "title": "Kuidas toimub kauba tagastamine? ",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-3",
          "title": "Kus ma näen transpordikulu?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-4",
          "title": "Kuidas saan katkestada või muuta tellimust?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
      ]
    },
    "description": "<h2>Accordion title</h2><p>Accordion description</p>"
  }
}
  • Handle: @accordion-module--default
  • Filesystem Path: src/patterns/modules/accordion-module/accordion-module.twig
  • References (2): @accordion, @section