Copy environment

Accordion List 

<div class="section     section--mt-large     section--mb-large accordion-list">
    <div class="section__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
                <div class="section__content ">
                    <div class="accordion js-accordion-group  animation__target">
                        <div class="accordion__item js-accordion animation__target" id="accordion-item-1">
                            <a href="#accordion-item-1" class="accordion__header js-accordion-control">
                                <h3 class="h3 accordion__title">Big mobile view multiline accordion item 1</h3>
                                <svg class="icon  accordion__icon">
                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#plus-36"></use>
                                </svg>
                            </a>
                            <div class="accordion__content js-accordion-content">
                                <div class="accordion__inner text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
                                </div>
                            </div>
                        </div>
                        <div class="accordion__item js-accordion animation__target" id="accordion-item-2">
                            <a href="#accordion-item-2" class="accordion__header js-accordion-control">
                                <h3 class="h3 accordion__title">Accordion item 2</h3>
                                <svg class="icon  accordion__icon">
                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#plus-36"></use>
                                </svg>
                            </a>
                            <div class="accordion__content js-accordion-content">
                                <div class="accordion__inner text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
                                </div>
                            </div>
                        </div>
                        <div class="accordion__item js-accordion animation__target" id="accordion-item-3">
                            <a href="#accordion-item-3" class="accordion__header js-accordion-control">
                                <h3 class="h3 accordion__title">Accordion item 3</h3>
                                <svg class="icon  accordion__icon">
                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#plus-36"></use>
                                </svg>
                            </a>
                            <div class="accordion__content js-accordion-content">
                                <div class="accordion__inner text">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
 
{% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set bottomSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.bottomSpacing %}
            section--mb-small
        {% elseif 'medium' in data.bottomSpacing %}
            section--mb-medium
        {% else %}
            section--mb-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set content %}
    {% if data.accordion %}
        {% include '@accordion' with { data: data.accordion, class: 'animation__target', modifier: '' } %}
    {% endif %}
{% endset %}
{% include '@section' with { class: 'accordion-list', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content }, container: true } %}

{
  "language": "en-US",
  "data": {
    "accordion": {
      "items": [
        {
          "id": "accordion-item-1",
          "title": "Big mobile view multiline accordion item 1",
          "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
        },
        {
          "id": "accordion-item-2",
          "title": "Accordion item 2",
          "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
        },
        {
          "id": "accordion-item-3",
          "title": "Accordion item 3",
          "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
        }
      ]
    }
  }
}
  • Handle: @accordion-list--default
  • Filesystem Path: src/patterns/modules/accordion-list/accordion-list.twig
  • References (2): @accordion, @section