This is the answer
This is the answer
Discover the power of the Greenlight Accordion Element Block in action!
This live demo showcases how you can create interactive, SEO-optimized accordions for your WordPress site with ease.
Leveraging FAQ schema dynamic attributes, each accordion item includes structured schema markup to boost your search engine visibility and improve rich snippet potential.
Perfect for FAQs, product features, or knowledge base content, this Greenlight block demo highlights seamless integration with your website and enhanced SEO performance.
Experience how dynamic, schema-ready accordions can elevate both user experience and search rankings.
Instructions
- Click on the copy code icon on the HTML header below to copy to clipboard.
- Paste directly into block editor.
- Consider Buying Me A Coffee. A small amount goes along way to help build this site to make your life easier. Thank you for the consideration.
HTML
<!-- wp:greenshift-blocks/element {"id":"gsbp-65ea3ca","dynamicGClasses":[{"value":"gs_accordion_250","type":"local","label":"gs_accordion_250","localed":false,"css":"","attributes":{"styleAttributes":[]},"originalBlock":"greenshift-blocks/element","selectors":[{"value":" \u003e .gs_item","attributes":{"styleAttributes":{"borderRadiusLink_Extra":true,"borderTopLeftRadius":["8px"],"borderBottomLeftRadius":["8px"],"borderTopRightRadius":["8px"],"borderBottomRightRadius":["8px"],"overflow":["hidden"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dborder, #00000012)"],"borderCustom_Extra":false,"borderLink_Extra":false}},"css":".gs_accordion_250 \u003e .gs_item{border-top-left-radius:8px;border-bottom-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;overflow:hidden;border-width:1px;border-style:solid;border-color:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dborder, #00000012);}"},{"value":" .gs_title","attributes":{"styleAttributes":{"marginTop":["0px"],"marginRight":["0px"],"marginBottom":["0px"],"marginLeft":["0px"],"paddingTop":["0px"],"paddingRight":["0px"],"paddingBottom":["0px"],"paddingLeft":["0px"]}},"css":".gs_accordion_250 .gs_title{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}"},{"value":" .gs_title button","attributes":{"styleAttributes":{"fontSize":["1rem"],"backgroundColor":["#0000000d"],"borderCustom_Extra":true,"border":["none"],"paddingTop":["1rem"],"paddingBottom":["1rem"],"paddingRight":["1.5rem"],"paddingLeft":["1.5rem"],"fontWeight":["normal"],"textDecoration":["none"],"display":["flex"],"justifyContent":["space-between"],"alignItems":["center"],"width":["100%"],"color":["#000000"],"cursor":["pointer"],"columnGap":["5px"]}},"css":".gs_accordion_250 .gs_title button{font-size:1rem;background-color:#0000000d;border:none;padding-top:1rem;padding-bottom:1rem;padding-right:1.5rem;padding-left:1.5rem;font-weight:normal;text-decoration:none;display:flex;justify-content:space-between;align-items:center;width:100%;color:#000000;cursor:pointer;column-gap:5px;}"},{"value":" .gs_title .gs_icon","attributes":{"styleAttributes":{"width":["17px"],"height":["17px"],"transition":["all 0.5s ease"]}},"css":".gs_accordion_250 .gs_title .gs_icon{width:17px;height:17px;transition:all 0.5s ease;}"},{"value":"\u003e .gs_item \u003e .gs_content","attributes":{"styleAttributes":{"maxHeight":["0px"],"overflow":["hidden"],"transition":["max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1)"],"opacity":["0"]}},"css":".gs_accordion_250 \u003e .gs_item \u003e .gs_content{max-height:0px;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);opacity:0;}"},{"value":" \u003e .gs_item[data-active] \u003e .gs_content","attributes":{"styleAttributes":{"maxHeight":["5000px"],"opacity":["1"]}},"css":".gs_accordion_250 \u003e .gs_item[data-active] \u003e .gs_content{max-height:5000px;opacity:1;}"},{"value":" .gs_content \u003e .gs_content_inner","attributes":{"styleAttributes":{"paddingTop":["25px"],"paddingRight":["25px"],"paddingBottom":["25px"],"paddingLeft":["25px"],"fontSize":["1rem"],"lineHeight":["1.7rem"]}},"css":".gs_accordion_250 .gs_content \u003e .gs_content_inner{padding-top:25px;padding-right:25px;padding-bottom:25px;padding-left:25px;font-size:1rem;line-height:1.7rem;}"},{"value":" \u003e .gs_item[data-active] \u003e .gs_title .gs_icon","attributes":{"styleAttributes":{"transform":["rotate(90deg)"]}},"css":".gs_accordion_250 \u003e .gs_item[data-active] \u003e .gs_title .gs_icon{transform:rotate(90deg);}"}]}],"type":"inner","className":"gs_accordion_250","localId":"gsbp-65ea3ca","dynamicAttributes":[{"name":"data-type","value":"accordion-component"},{"name":"itemscope","value":""},{"name":"itemtype","value":"https://schema.org/FAQPage"}],"styleAttributes":{"position":["relative"],"display":["flex"],"flexDirection":["column"],"rowGap":["15px"],"columnGap":["15px"],"alignItems":["stretch"],"justifyContent":["flex-start"]},"isVariation":"accordion"} -->
<div class="gs_accordion_250 gsbp-65ea3ca" data-type="accordion-component" itemscope itemtype="https://schema.org/FAQPage"><!-- wp:greenshift-blocks/element {"id":"gsbp-1924e99","type":"inner","className":"gs_item","localId":"gsbp-1924e99","dynamicAttributes":[{"name":"itemscope","value":""},{"name":"itemtype","value":"https://schema.org/Question"},{"name":"itemprop","value":"mainEntity"},{"name":"aria-controls","value":"faq1"}],"metadata":{"name":"Accordion Item"}} -->
<div class="gs_item" itemscope itemtype="https://schema.org/Question" itemprop="mainEntity" aria-controls="faq1"><!-- wp:greenshift-blocks/element {"id":"gsbp-574a1dd","tag":"h3","type":"inner","className":"gs_title","localId":"gsbp-574a1dd","dynamicAttributes":[],"metadata":{"name":"Accordion Title"}} -->
<h3 class="gs_title"><!-- wp:greenshift-blocks/element {"id":"gsbp-31c9a19","tag":"button","type":"inner","className":"gs_click_sync","localId":"gsbp-31c9a19","formAttributes":{"type":"button"},"dynamicAttributes":[{"name":"aria-expanded","value":"false"},{"name":"id","value":"faq1-label"},{"name":"aria-controls","value":"faq1"}]} -->
<button class="gs_click_sync" type="button" aria-expanded="false" id="faq1-label" aria-controls="faq1"><!-- wp:greenshift-blocks/element {"id":"gsbp-75d3a75","textContent":"Accordion Title","tag":"span","className":"gs_name","localId":"gsbp-75d3a75","dynamicAttributes":[{"name":"itemprop","value":"name"}]} -->
<span class="gs_name" itemprop="name">Accordion Title</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-8ab3361","tag":"svg","icon":{"icon":{"font":"rhicon rhi-chevron-right","svg":"","image":""},"type":"font"},"className":"gs_icon","localId":"gsbp-8ab3361"} -->
<svg viewBox="0 0 512 1024" width="512" height="1024" class="gs_icon"><path d="M49.414 76.202l-39.598 39.596c-9.372 9.372-9.372 24.568 0 33.942l361.398 362.26-361.398 362.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.828-418.828c-9.374-9.374-24.57-9.374-33.942 0z" /></svg>
<!-- /wp:greenshift-blocks/element --></button>
<!-- /wp:greenshift-blocks/element --></h3>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-044fc50","type":"inner","className":"gs_content","localId":"gsbp-044fc50","dynamicAttributes":[{"name":"role","value":"region"},{"name":"aria-hidden","value":"true"},{"name":"itemscope","value":""},{"name":"itemtype","value":"https://schema.org/Answer"},{"name":"itemprop","value":"acceptedAnswer"},{"name":"aria-labelledby","value":"faq1-label"},{"name":"id","value":"faq1"}],"metadata":{"name":"Accordion Content"}} -->
<div class="gs_content" role="region" aria-hidden="true" itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="faq1-label" id="faq1"><!-- wp:greenshift-blocks/element {"id":"gsbp-f71f0b0","type":"inner","className":"gs_content_inner","localId":"gsbp-f71f0b0","dynamicAttributes":[{"name":"itemprop","value":"text"}]} -->
<div class="gs_content_inner" itemprop="text"><!-- wp:paragraph -->
<p>This is the answer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-f9cf49c","type":"inner","className":"gs_item","localId":"gsbp-f9cf49c","dynamicAttributes":[{"name":"itemscope","value":""},{"name":"itemtype","value":"https://schema.org/Question"},{"name":"itemprop","value":"mainEntity"},{"name":"aria-controls","value":"faq2"}],"metadata":{"name":"Accordion Item"}} -->
<div class="gs_item" itemscope itemtype="https://schema.org/Question" itemprop="mainEntity" aria-controls="faq2"><!-- wp:greenshift-blocks/element {"id":"gsbp-3a3dfe4","tag":"h3","type":"inner","className":"gs_title","localId":"gsbp-3a3dfe4","dynamicAttributes":[],"metadata":{"name":"Accordion Title"}} -->
<h3 class="gs_title"><!-- wp:greenshift-blocks/element {"id":"gsbp-5d22b21","tag":"button","type":"inner","className":"gs_click_sync","localId":"gsbp-5d22b21","formAttributes":{"type":"button"},"dynamicAttributes":[{"name":"aria-expanded","value":"false"},{"name":"id","value":"faq2-label"},{"name":"aria-controls","value":"faq2"}]} -->
<button class="gs_click_sync" type="button" aria-expanded="false" id="faq2-label" aria-controls="faq2"><!-- wp:greenshift-blocks/element {"id":"gsbp-d8e91a3","textContent":"Accordion Title","tag":"span","className":"gs_name","localId":"gsbp-d8e91a3","dynamicAttributes":[{"name":"itemprop","value":"name"}]} -->
<span class="gs_name" itemprop="name">Accordion Title</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-7de8f00","tag":"svg","icon":{"icon":{"font":"rhicon rhi-chevron-right","svg":"","image":""},"type":"font"},"className":"gs_icon","localId":"gsbp-7de8f00"} -->
<svg viewBox="0 0 512 1024" width="512" height="1024" class="gs_icon"><path d="M49.414 76.202l-39.598 39.596c-9.372 9.372-9.372 24.568 0 33.942l361.398 362.26-361.398 362.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.828-418.828c-9.374-9.374-24.57-9.374-33.942 0z" /></svg>
<!-- /wp:greenshift-blocks/element --></button>
<!-- /wp:greenshift-blocks/element --></h3>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-369d13d","type":"inner","className":"gs_content","localId":"gsbp-369d13d","dynamicAttributes":[{"name":"role","value":"region"},{"name":"aria-hidden","value":"true"},{"name":"itemscope","value":""},{"name":"itemtype","value":"https://schema.org/Answer"},{"name":"itemprop","value":"acceptedAnswer"},{"name":"aria-labelledby","value":"faq2-label"},{"name":"id","value":"faq2"}],"metadata":{"name":"Accordion Content"}} -->
<div class="gs_content" role="region" aria-hidden="true" itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="faq2-label" id="faq2"><!-- wp:greenshift-blocks/element {"id":"gsbp-6616c64","type":"inner","className":"gs_content_inner","localId":"gsbp-6616c64","dynamicAttributes":[{"name":"itemprop","value":"text"}]} -->
<div class="gs_content_inner" itemprop="text"><!-- wp:paragraph -->
<p>This is the answer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->Let’s Build Series
Watch How This Template Was Made
