Accordian

Accordion allows users to toggle panels of related content. Panels of varying component type can be created.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Accordion with three items with each item being a layout container.

Result

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-6c8513b5eb" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-6c8513b5eb&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:11:51Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-6c8513b5eb-item-ac52ebd13f&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-6c8513b5eb-item-ac52ebd13f">
      <h3 class="cmp-accordion__header">
        <button id="accordion-6c8513b5eb-item-ac52ebd13f-button" class="cmp-accordion__button" aria-controls="accordion-6c8513b5eb-item-ac52ebd13f-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-6c8513b5eb-item-ac52ebd13f-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-6c8513b5eb-item-ac52ebd13f-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-6c8513b5eb-item-6c119b11cf&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-6c8513b5eb-item-6c119b11cf">
      <h3 class="cmp-accordion__header">
        <button id="accordion-6c8513b5eb-item-6c119b11cf-button" class="cmp-accordion__button" aria-controls="accordion-6c8513b5eb-item-6c119b11cf-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-6c8513b5eb-item-6c119b11cf-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-6c8513b5eb-item-6c119b11cf-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-6c8513b5eb-item-0359725201&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-6c8513b5eb-item-0359725201">
      <h3 class="cmp-accordion__header">
        <button id="accordion-6c8513b5eb-item-0359725201-button" class="cmp-accordion__button" aria-controls="accordion-6c8513b5eb-item-0359725201-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-6c8513b5eb-item-0359725201-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-6c8513b5eb-item-0359725201-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-6c8513b5eb","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_021105873","item_560792289","item_234605691"],":items":{"item_021105873":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1"},"item_560792289":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2"},"item_234605691":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-6c8513b5eb":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:11:51Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS: Title
Sample Content
Content

Accordion with three items with each item being a layout container and containing sample content.

Result

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-d66e5c4a9d" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-d66e5c4a9d&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:12:10Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-d66e5c4a9d-item-656f5a46b8&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-d66e5c4a9d-item-656f5a46b8">
      <h3 class="cmp-accordion__header">
        <button id="accordion-d66e5c4a9d-item-656f5a46b8-button" class="cmp-accordion__button" aria-controls="accordion-d66e5c4a9d-item-656f5a46b8-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-d66e5c4a9d-item-656f5a46b8-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-d66e5c4a9d-item-656f5a46b8-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="image aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_617130698/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-331f876d40" data-cmp-data-layer="{&quot;image-331f876d40&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:13:13Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <img src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_617130698/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
                <meta itemprop="caption" content="Lava flowing into the ocean">
              </div>
            </div>
            <div class="text aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-data-layer="{&quot;text-ba8010aa72&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>\n&quot;}}" id="text-ba8010aa72" class="cmp-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-d66e5c4a9d-item-ed0fbad5d1&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-d66e5c4a9d-item-ed0fbad5d1">
      <h3 class="cmp-accordion__header">
        <button id="accordion-d66e5c4a9d-item-ed0fbad5d1-button" class="cmp-accordion__button" aria-controls="accordion-d66e5c4a9d-item-ed0fbad5d1-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-d66e5c4a9d-item-ed0fbad5d1-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-d66e5c4a9d-item-ed0fbad5d1-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="image aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_779036566/image.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-964d56ea04" data-cmp-data-layer="{&quot;image-964d56ea04&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:14:44Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <img src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_779036566/image.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
                <meta itemprop="caption" content="Snowy mountain glacier">
              </div>
            </div>
            <div class="text aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-data-layer="{&quot;text-edc6a11fde&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;xdm:text&quot;:&quot;<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>\n&quot;}}" id="text-edc6a11fde" class="cmp-text">
                <p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-d66e5c4a9d-item-ef5a6dad73&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-d66e5c4a9d-item-ef5a6dad73">
      <h3 class="cmp-accordion__header">
        <button id="accordion-d66e5c4a9d-item-ef5a6dad73-button" class="cmp-accordion__button" aria-controls="accordion-d66e5c4a9d-item-ef5a6dad73-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-d66e5c4a9d-item-ef5a6dad73-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-d66e5c4a9d-item-ef5a6dad73-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="image aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_770673778/image.coreimg{.width}.jpeg/1550673081151/mountain-range.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-title="Aerial photo of mountain range" id="image-e0188e8407" data-cmp-data-layer="{&quot;image-e0188e8407&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:14:50Z&quot;,&quot;dc:title&quot;:&quot;Aerial photo of mountain range&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c0a39183-23f4-48f0-8db7-bb41ba2b0122&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:31:21Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                <img src="/content/core-components-examples/library/container/accordion/_jcr_content/root/responsivegrid/demo_397543166/component/accordion/item_770673778/image.coreimg.jpeg/1550673081151/mountain-range.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Aerial photo of mountain range" title="Aerial photo of mountain range">
                <meta itemprop="caption" content="Aerial photo of mountain range">
              </div>
            </div>
            <div class="text aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0">
              <div data-cmp-data-layer="{&quot;text-1950134246&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;xdm:text&quot;:&quot;<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>\n&quot;}}" id="text-1950134246" class="cmp-text">
                <p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-d66e5c4a9d","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_617130698","item_779036566","item_770673778"],":items":{"item_617130698":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none","text":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["image","text"],":items":{"image":{"id":"image-331f876d40","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_617130698\/image.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_617130698\/image.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-331f876d40":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:13:13Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}}},"text":{"id":"text-ba8010aa72","text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-ba8010aa72":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:45:56Z","xdm:text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n"}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1"},"item_779036566":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none","text":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["image","text"],":items":{"image":{"id":"image-964d56ea04","alt":"Snowy mountain glacier","title":"Snowy mountain glacier","src":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_779036566\/image.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_779036566\/image.coreimg{.width}.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-964d56ea04":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:14:44Z","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/snowy-mountain-glacier.jpg","xdm:tags":[],"xdm:smartTags":[]}}}},"text":{"id":"text-edc6a11fde","text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-edc6a11fde":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:46:55Z","xdm:text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n"}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2"},"item_770673778":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none","text":"aem-GridColumn aem-GridColumn--default--6 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["image","text"],":items":{"image":{"id":"image-e0188e8407","alt":"Aerial photo of mountain range","title":"Aerial photo of mountain range","src":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_770673778\/image.coreimg.jpeg\/1550673081151\/mountain-range.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/accordion\/_jcr_content\/root\/responsivegrid\/demo_397543166\/component\/accordion\/item_770673778\/image.coreimg{.width}.jpeg\/1550673081151\/mountain-range.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-e0188e8407":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:14:50Z","dc:title":"Aerial photo of mountain range","image":{"repo:id":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","repo:modifyDate":"2019-02-20T14:31:21Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/mountain-range.jpg","xdm:tags":[],"xdm:smartTags":[]}}}},"text":{"id":"text-1950134246","text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-1950134246":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:47:15Z","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n"}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-d66e5c4a9d":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:12:10Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS: Title
Expanded Item
Content

Accordion with three items with the item expanded by default being the first item.

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
expandedItems: item_1
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-78c7838df5" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-78c7838df5&quot;:{&quot;shownItems&quot;:[&quot;accordion-78c7838df5-item-ab0d3a9f0d&quot;],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:12:10Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78c7838df5-item-ab0d3a9f0d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-78c7838df5-item-ab0d3a9f0d" data-cmp-expanded="">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78c7838df5-item-ab0d3a9f0d-button" class="cmp-accordion__button cmp-accordion__button--expanded" aria-controls="accordion-78c7838df5-item-ab0d3a9f0d-panel" data-cmp-hook-accordion="button" aria-expanded="true">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78c7838df5-item-ab0d3a9f0d-panel" class="cmp-accordion__panel cmp-accordion__panel--expanded" role="region" aria-labelledby="accordion-78c7838df5-item-ab0d3a9f0d-button" aria-hidden="false">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-ab0d3a9f0d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>\n&quot;}}" id="text-ab0d3a9f0d" class="cmp-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78c7838df5-item-d20284d12d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-78c7838df5-item-d20284d12d">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78c7838df5-item-d20284d12d-button" class="cmp-accordion__button" aria-controls="accordion-78c7838df5-item-d20284d12d-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78c7838df5-item-d20284d12d-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-78c7838df5-item-d20284d12d-button" aria-hidden="true">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-d20284d12d&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;xdm:text&quot;:&quot;<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>\n&quot;}}" id="text-d20284d12d" class="cmp-text">
            <p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78c7838df5-item-6b23edcf7a&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-78c7838df5-item-6b23edcf7a">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78c7838df5-item-6b23edcf7a-button" class="cmp-accordion__button" aria-controls="accordion-78c7838df5-item-6b23edcf7a-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78c7838df5-item-6b23edcf7a-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-78c7838df5-item-6b23edcf7a-button" aria-hidden="true">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-6b23edcf7a&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;xdm:text&quot;:&quot;<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>\n&quot;}}" id="text-6b23edcf7a" class="cmp-text">
            <p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-78c7838df5","singleExpansion":false,"expandedItems":["item_1"],":itemsOrder":["item_1","item_2","item_3"],":items":{"item_1":{"id":"text-ab0d3a9f0d","text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-ab0d3a9f0d":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:45:56Z","xdm:text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n"}},"cq:panelTitle":"Item 1"},"item_2":{"id":"text-d20284d12d","text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-d20284d12d":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:46:55Z","xdm:text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n"}},"cq:panelTitle":"Item 2"},"item_3":{"id":"text-6b23edcf7a","text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-6b23edcf7a":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:47:15Z","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n"}},"cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-78c7838df5":{"shownItems":["accordion-78c7838df5-item-ab0d3a9f0d"],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:12:10Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS: Title
Expanded Items
Content

Accordion with three items and all items expanded by default.

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.

Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
expandedItems: item_1,item_2,item_3
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-78bc3b842e" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-78bc3b842e&quot;:{&quot;shownItems&quot;:[&quot;accordion-78bc3b842e-item-0b936d3b6c&quot;,&quot;accordion-78bc3b842e-item-273d53765b&quot;,&quot;accordion-78bc3b842e-item-7a1ad04f9b&quot;],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:12:10Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78bc3b842e-item-0b936d3b6c&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-78bc3b842e-item-0b936d3b6c" data-cmp-expanded="">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78bc3b842e-item-0b936d3b6c-button" class="cmp-accordion__button cmp-accordion__button--expanded" aria-controls="accordion-78bc3b842e-item-0b936d3b6c-panel" data-cmp-hook-accordion="button" aria-expanded="true">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78bc3b842e-item-0b936d3b6c-panel" class="cmp-accordion__panel cmp-accordion__panel--expanded" role="region" aria-labelledby="accordion-78bc3b842e-item-0b936d3b6c-button" aria-hidden="false">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-0b936d3b6c&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>\n&quot;}}" id="text-0b936d3b6c" class="cmp-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78bc3b842e-item-273d53765b&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-78bc3b842e-item-273d53765b" data-cmp-expanded="">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78bc3b842e-item-273d53765b-button" class="cmp-accordion__button cmp-accordion__button--expanded" aria-controls="accordion-78bc3b842e-item-273d53765b-panel" data-cmp-hook-accordion="button" aria-expanded="true">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78bc3b842e-item-273d53765b-panel" class="cmp-accordion__panel cmp-accordion__panel--expanded" role="region" aria-labelledby="accordion-78bc3b842e-item-273d53765b-button" aria-hidden="false">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-273d53765b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;xdm:text&quot;:&quot;<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>\n&quot;}}" id="text-273d53765b" class="cmp-text">
            <p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-78bc3b842e-item-7a1ad04f9b&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-78bc3b842e-item-7a1ad04f9b" data-cmp-expanded="">
      <h3 class="cmp-accordion__header">
        <button id="accordion-78bc3b842e-item-7a1ad04f9b-button" class="cmp-accordion__button cmp-accordion__button--expanded" aria-controls="accordion-78bc3b842e-item-7a1ad04f9b-panel" data-cmp-hook-accordion="button" aria-expanded="true">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-78bc3b842e-item-7a1ad04f9b-panel" class="cmp-accordion__panel cmp-accordion__panel--expanded" role="region" aria-labelledby="accordion-78bc3b842e-item-7a1ad04f9b-button" aria-hidden="false">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-7a1ad04f9b&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;xdm:text&quot;:&quot;<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>\n&quot;}}" id="text-7a1ad04f9b" class="cmp-text">
            <p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-78bc3b842e","singleExpansion":false,"expandedItems":["item_1","item_2","item_3"],":itemsOrder":["item_1","item_2","item_3"],":items":{"item_1":{"id":"text-0b936d3b6c","text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-0b936d3b6c":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:45:56Z","xdm:text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n"}},"cq:panelTitle":"Item 1"},"item_2":{"id":"text-273d53765b","text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-273d53765b":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:46:55Z","xdm:text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n"}},"cq:panelTitle":"Item 2"},"item_3":{"id":"text-7a1ad04f9b","text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-7a1ad04f9b":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:47:15Z","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n"}},"cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-78bc3b842e":{"shownItems":["accordion-78bc3b842e-item-0b936d3b6c","accordion-78bc3b842e-item-273d53765b","accordion-78bc3b842e-item-7a1ad04f9b"],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:12:10Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS: Title
Single Expansion
Content

Accordion with single expansion enabled, which forces a single item to be expanded at a time. Expanding one item will collapse all others.

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
expandedItems: item_1
singleExpansion: true
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-e1741ec5db" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-e1741ec5db&quot;:{&quot;shownItems&quot;:[&quot;accordion-e1741ec5db-item-a133db33bf&quot;],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:12:10Z&quot;}}" data-cmp-single-expansion="" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e1741ec5db-item-a133db33bf&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-e1741ec5db-item-a133db33bf" data-cmp-expanded="">
      <h3 class="cmp-accordion__header">
        <button id="accordion-e1741ec5db-item-a133db33bf-button" class="cmp-accordion__button cmp-accordion__button--expanded cmp-accordion__button--disabled" aria-controls="accordion-e1741ec5db-item-a133db33bf-panel" data-cmp-hook-accordion="button" aria-expanded="true" aria-disabled="true">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-e1741ec5db-item-a133db33bf-panel" class="cmp-accordion__panel cmp-accordion__panel--expanded" role="region" aria-labelledby="accordion-e1741ec5db-item-a133db33bf-button" aria-hidden="false">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-a133db33bf&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>\n&quot;}}" id="text-a133db33bf" class="cmp-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e1741ec5db-item-a682d53763&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-e1741ec5db-item-a682d53763">
      <h3 class="cmp-accordion__header">
        <button id="accordion-e1741ec5db-item-a682d53763-button" class="cmp-accordion__button" aria-controls="accordion-e1741ec5db-item-a682d53763-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-e1741ec5db-item-a682d53763-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-e1741ec5db-item-a682d53763-button" aria-hidden="true">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-a682d53763&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;xdm:text&quot;:&quot;<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>\n&quot;}}" id="text-a682d53763" class="cmp-text">
            <p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e1741ec5db-item-a0f8a294e7&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-e1741ec5db-item-a0f8a294e7">
      <h3 class="cmp-accordion__header">
        <button id="accordion-e1741ec5db-item-a0f8a294e7-button" class="cmp-accordion__button" aria-controls="accordion-e1741ec5db-item-a0f8a294e7-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-e1741ec5db-item-a0f8a294e7-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-e1741ec5db-item-a0f8a294e7-button" aria-hidden="true">
        <div class="text">
          <div data-cmp-data-layer="{&quot;text-a0f8a294e7&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;xdm:text&quot;:&quot;<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>\n&quot;}}" id="text-a0f8a294e7" class="cmp-text">
            <p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-e1741ec5db","singleExpansion":true,"expandedItems":["item_1"],":itemsOrder":["item_1","item_2","item_3"],":items":{"item_1":{"id":"text-a133db33bf","text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-a133db33bf":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:45:56Z","xdm:text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n"}},"cq:panelTitle":"Item 1"},"item_2":{"id":"text-a682d53763","text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-a682d53763":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:46:55Z","xdm:text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n"}},"cq:panelTitle":"Item 2"},"item_3":{"id":"text-a0f8a294e7","text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-a0f8a294e7":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:47:15Z","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n"}},"cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-e1741ec5db":{"shownItems":["accordion-e1741ec5db-item-a133db33bf"],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:12:10Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS: Title
Nested
Content

Nested accordions, with each item containing an accordion component in its layout container.

Result

Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/accordion
Markup:
<div class="accordion">
  <div id="accordion-bfe8f2a91b" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-bfe8f2a91b&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:25:41Z&quot;}}" data-placeholder-text="false">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bfe8f2a91b-item-19be3d0aa6&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1&quot;}}" id="accordion-bfe8f2a91b-item-19be3d0aa6">
      <h3 class="cmp-accordion__header">
        <button id="accordion-bfe8f2a91b-item-19be3d0aa6-button" class="cmp-accordion__button" aria-controls="accordion-bfe8f2a91b-item-19be3d0aa6-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 1</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-bfe8f2a91b-item-19be3d0aa6-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bfe8f2a91b-item-19be3d0aa6-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="accordion aem-GridColumn aem-GridColumn--default--12">
              <div id="accordion-e3bbe3c964" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-e3bbe3c964&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:03Z&quot;}}" data-placeholder-text="false">
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e3bbe3c964-item-97da4115be&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1.1&quot;}}" id="accordion-e3bbe3c964-item-97da4115be">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-e3bbe3c964-item-97da4115be-button" class="cmp-accordion__button" aria-controls="accordion-e3bbe3c964-item-97da4115be-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 1.1</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-e3bbe3c964-item-97da4115be-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-e3bbe3c964-item-97da4115be-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e3bbe3c964-item-e592f59654&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1.2&quot;}}" id="accordion-e3bbe3c964-item-e592f59654">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-e3bbe3c964-item-e592f59654-button" class="cmp-accordion__button" aria-controls="accordion-e3bbe3c964-item-e592f59654-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 1.2</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-e3bbe3c964-item-e592f59654-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-e3bbe3c964-item-e592f59654-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-e3bbe3c964-item-1b893513d6&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 1.3&quot;}}" id="accordion-e3bbe3c964-item-1b893513d6">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-e3bbe3c964-item-1b893513d6-button" class="cmp-accordion__button" aria-controls="accordion-e3bbe3c964-item-1b893513d6-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 1.3</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-e3bbe3c964-item-1b893513d6-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-e3bbe3c964-item-1b893513d6-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bfe8f2a91b-item-079f8b5ba0&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2&quot;}}" id="accordion-bfe8f2a91b-item-079f8b5ba0">
      <h3 class="cmp-accordion__header">
        <button id="accordion-bfe8f2a91b-item-079f8b5ba0-button" class="cmp-accordion__button" aria-controls="accordion-bfe8f2a91b-item-079f8b5ba0-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 2</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-bfe8f2a91b-item-079f8b5ba0-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bfe8f2a91b-item-079f8b5ba0-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="accordion aem-GridColumn aem-GridColumn--default--12">
              <div id="accordion-dca50b5feb" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-dca50b5feb&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:24Z&quot;}}" data-placeholder-text="false">
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-dca50b5feb-item-50ea7c2437&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2.1&quot;}}" id="accordion-dca50b5feb-item-50ea7c2437">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-dca50b5feb-item-50ea7c2437-button" class="cmp-accordion__button" aria-controls="accordion-dca50b5feb-item-50ea7c2437-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 2.1</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-dca50b5feb-item-50ea7c2437-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-dca50b5feb-item-50ea7c2437-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-dca50b5feb-item-6be1f534e5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2.2&quot;}}" id="accordion-dca50b5feb-item-6be1f534e5">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-dca50b5feb-item-6be1f534e5-button" class="cmp-accordion__button" aria-controls="accordion-dca50b5feb-item-6be1f534e5-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 2.2</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-dca50b5feb-item-6be1f534e5-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-dca50b5feb-item-6be1f534e5-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-dca50b5feb-item-7c98057a85&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 2.3&quot;}}" id="accordion-dca50b5feb-item-7c98057a85">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-dca50b5feb-item-7c98057a85-button" class="cmp-accordion__button" aria-controls="accordion-dca50b5feb-item-7c98057a85-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 2.3</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-dca50b5feb-item-7c98057a85-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-dca50b5feb-item-7c98057a85-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bfe8f2a91b-item-e6a5addf00&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3&quot;}}" id="accordion-bfe8f2a91b-item-e6a5addf00">
      <h3 class="cmp-accordion__header">
        <button id="accordion-bfe8f2a91b-item-e6a5addf00-button" class="cmp-accordion__button" aria-controls="accordion-bfe8f2a91b-item-e6a5addf00-panel" data-cmp-hook-accordion="button" aria-expanded="false">
          <span class="cmp-accordion__title">Item 3</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </h3>
      <div data-cmp-hook-accordion="panel" id="accordion-bfe8f2a91b-item-e6a5addf00-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bfe8f2a91b-item-e6a5addf00-button" aria-hidden="true">
        <div class="responsivegrid">
          <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
            <div class="accordion aem-GridColumn aem-GridColumn--default--12">
              <div id="accordion-bc1e026022" class="cmp-accordion" data-cmp-data-layer="{&quot;accordion-bc1e026022&quot;:{&quot;shownItems&quot;:[],&quot;@type&quot;:&quot;core-components-examples/components/accordion&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:36Z&quot;}}" data-placeholder-text="false">
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bc1e026022-item-28f4b7ff39&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3.1&quot;}}" id="accordion-bc1e026022-item-28f4b7ff39">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-bc1e026022-item-28f4b7ff39-button" class="cmp-accordion__button" aria-controls="accordion-bc1e026022-item-28f4b7ff39-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 3.1</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-bc1e026022-item-28f4b7ff39-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bc1e026022-item-28f4b7ff39-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bc1e026022-item-ba72e9af2f&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3.2&quot;}}" id="accordion-bc1e026022-item-ba72e9af2f">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-bc1e026022-item-ba72e9af2f-button" class="cmp-accordion__button" aria-controls="accordion-bc1e026022-item-ba72e9af2f-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 3.2</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-bc1e026022-item-ba72e9af2f-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bc1e026022-item-ba72e9af2f-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-bc1e026022-item-04d778e8cf&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/accordion/item&quot;,&quot;dc:title&quot;:&quot;Item 3.3&quot;}}" id="accordion-bc1e026022-item-04d778e8cf">
                  <h3 class="cmp-accordion__header">
                    <button id="accordion-bc1e026022-item-04d778e8cf-button" class="cmp-accordion__button" aria-controls="accordion-bc1e026022-item-04d778e8cf-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                      <span class="cmp-accordion__title">Item 3.3</span>
                      <span class="cmp-accordion__icon"></span>
                    </button>
                  </h3>
                  <div data-cmp-hook-accordion="panel" id="accordion-bc1e026022-item-04d778e8cf-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-bc1e026022-item-04d778e8cf-button" aria-hidden="true">
                    <div class="responsivegrid">
                      <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"accordion-bfe8f2a91b","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_215402425","item_467565399","item_326905762"],":items":{"item_215402425":{"columnCount":12,"columnClassNames":{"accordion":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["accordion"],":items":{"accordion":{"id":"accordion-e3bbe3c964","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_468781096","item_141376187","item_390197765"],":items":{"item_468781096":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1.1"},"item_141376187":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1.2"},"item_390197765":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1.3"}},"dataLayer":{"accordion-e3bbe3c964":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2019-01-22T11:51:03Z"}},":type":"core-components-examples\/components\/accordion"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 1"},"item_467565399":{"columnCount":12,"columnClassNames":{"accordion_copy":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["accordion_copy"],":items":{"accordion_copy":{"id":"accordion-dca50b5feb","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_645266587","item_857227661","item_810812133"],":items":{"item_645266587":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2.1"},"item_857227661":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2.2"},"item_810812133":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2.3"}},"dataLayer":{"accordion-dca50b5feb":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2019-01-22T11:51:24Z"}},":type":"core-components-examples\/components\/accordion"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 2"},"item_326905762":{"columnCount":12,"columnClassNames":{"accordion":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["accordion"],":items":{"accordion":{"id":"accordion-bc1e026022","singleExpansion":false,"expandedItems":[],":itemsOrder":["item_716487435","item_679027031","item_331258757"],":items":{"item_716487435":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3.1"},"item_679027031":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3.2"},"item_331258757":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3.3"}},"dataLayer":{"accordion-bc1e026022":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2019-01-22T11:51:36Z"}},":type":"core-components-examples\/components\/accordion"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Item 3"}},"dataLayer":{"accordion-bfe8f2a91b":{"shownItems":[],"@type":"core-components-examples\/components\/accordion","repo:modifyDate":"2018-12-07T12:25:41Z"}},":type":"core-components-examples\/components\/accordion"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *