Copy environment

Accordion

Preview 
<div class="accordion js-accordion-group  ">
    <div class="accordion__item js-accordion is-open" id="accordion-item-1">
        <a href="#accordion-item-1" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 1</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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" id="accordion-item-2">
        <a href="#accordion-item-2" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 2</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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" id="accordion-item-3">
        <a href="#accordion-item-3" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 3</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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>
 
{
  "language": "en-US",
  "data": {
    "items": [
      {
        "id": "accordion-item-1",
        "title": "Accordion item 1",
        "isOpen": true,
        "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."
      }
    ]
  }
}

Single

Preview 
<div class="accordion js-accordion-group accordion--single ">
    <div class="accordion__item js-accordion is-open" id="accordion-item-1">
        <a href="#accordion-item-1" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 1</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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" id="accordion-item-2">
        <a href="#accordion-item-2" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 2</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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" id="accordion-item-3">
        <a href="#accordion-item-3" class="accordion__header js-accordion-control">
            <div class="accordion__title">Accordion item 3</div>
            <svg class="icon  accordion__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#caret-down"></use>
</svg>
        </a>
        <div class="accordion__content js-accordion-content">
            <div class="accordion__inner">
                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>
 
{
  "language": "en-US",
  "data": {
    "items": [
      {
        "id": "accordion-item-1",
        "title": "Accordion item 1",
        "isOpen": true,
        "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."
      }
    ]
  },
  "modifier": "accordion--single"
}
  • Handle: @accordion--single
  • Tags:
  • Variants (2): default, single
  • Preview:
  • Filesystem Path: src/patterns/components/accordion/accordion.twig
  • References (1): @icon