Accordion

<!-- wp:paragraph -->
<p>Accordion is another container block which can be used in combination with other blocks. This block can be used mainly for FAQ, toggle blocks, and for spoiler blocks.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-725bff57-9b6a"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-725bff57-9b6a" id="gspb_infoBox-id-gsbp-725bff57-9b6a"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Accordion block has FAQ Seo Schema option. Check other blocks with <a href="/tag/seo-schema/">SEO Schema</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="spoiler-example">Spoiler example</h3>
<!-- /wp:heading -->

<!-- wp:greenshift-blocks/accordion {"id":"gsbp-5363ae9e-8ab8"} -->
<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-5363ae9e-8ab8" id="gspb_accordion-id-gsbp-5363ae9e-8ab8" itemscope itemtype=""><!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-d21d0371-6b97","title":"Spoiler Block","open":false} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-d21d0371-6b97 gsclose" id="gspb_accordionitem-gsbp-d21d0371-6b97" itemscope><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-d21d0371-6b97"><div class="gs-accordion-item__heading">Spoiler Block</div><meta itemprop="name" content="Spoiler Block"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-d21d0371-6b97" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>This block is closed on loading</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem --></div>
<!-- /wp:greenshift-blocks/accordion -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="accordion-block-example">Accordion block example</h3>
<!-- /wp:heading -->

<!-- wp:greenshift-blocks/accordion {"id":"gsbp-ac4d81b4-6b1e","toggleone":true,"seoschema":true,"tabs":3,"shadow":{"hoffset":0,"voffset":32,"blur":48,"spread":0,"color":"","position":null}} -->
<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-ac4d81b4-6b1e togglelogic" id="gspb_accordion-id-gsbp-ac4d81b4-6b1e" itemscope itemtype="https://schema.org/FAQPage"><!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-d443f5e8-0135","title":"First title","open":true,"seoschema":true} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-d443f5e8-0135 gsopen" id="gspb_accordionitem-gsbp-d443f5e8-0135" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><div class="gs-accordion-item__title" aria-expanded="true" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-d443f5e8-0135"><div class="gs-accordion-item__heading">First title</div><meta itemprop="name" content="First title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" id="gspb-accordion-item-content-gsbp-d443f5e8-0135" aria-hidden="false"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of accordion block and image</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":276,"width":"381px","height":"119px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp" alt="" class="wp-image-276" style="width:381px;height:119px"/></figure>
<!-- /wp:image --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-badb1f48-71b3","title":"Second title","seoschema":true} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-badb1f48-71b3 gsclose" id="gspb_accordionitem-gsbp-badb1f48-71b3" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-badb1f48-71b3"><div class="gs-accordion-item__heading">Second title</div><meta itemprop="name" content="Second title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" id="gspb-accordion-item-content-gsbp-badb1f48-71b3" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of second section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-5baa9a57-e9d0","title":"Third title","seoschema":true} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-5baa9a57-e9d0 gsclose" id="gspb_accordionitem-gsbp-5baa9a57-e9d0" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-5baa9a57-e9d0"><div class="gs-accordion-item__heading">Third title</div><meta itemprop="name" content="Third title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" id="gspb-accordion-item-content-gsbp-5baa9a57-e9d0" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of third section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem --></div>
<!-- /wp:greenshift-blocks/accordion -->

<!-- wp:paragraph -->
<p>You can also change styles of accordion block</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/accordion {"id":"gsbp-db86d83","toggleone":true,"seoschema":false,"tabs":3,"shadow":{"hoffset":0,"voffset":32,"blur":48,"spread":0,"color":"","position":null}} -->
<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-db86d83 togglelogic" id="gspb_accordion-id-gsbp-db86d83" itemscope itemtype=""><!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-249162c","title":"First title","open":true,"seoschema":false,"titlebackground":{"color":"#000000"},"titlecolor":"#ffffff"} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-249162c gsopen" id="gspb_accordionitem-gsbp-249162c" itemscope><div class="gs-accordion-item__title" aria-expanded="true" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-249162c"><div class="gs-accordion-item__heading">First title</div><meta itemprop="name" content="First title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-249162c" aria-hidden="false"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of accordion block and image</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":276,"width":"381px","height":"119px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp" alt="" class="wp-image-276" style="width:381px;height:119px"/></figure>
<!-- /wp:image --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-e3beeb9","title":"Second title","seoschema":false,"titlebackground":{"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dbutton, #ffd800)"}} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-e3beeb9 gsclose" id="gspb_accordionitem-gsbp-e3beeb9" itemscope><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-e3beeb9"><div class="gs-accordion-item__heading">Second title</div><meta itemprop="name" content="Second title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-e3beeb9" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of second section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-8961028","title":"Third title","seoschema":false,"titlebackground":{"color":"#000000"},"titlecolor":"#ffffff"} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-8961028 gsclose" id="gspb_accordionitem-gsbp-8961028" itemscope><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-8961028"><div class="gs-accordion-item__heading">Third title</div><meta itemprop="name" content="Third title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-8961028" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of third section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem --></div>
<!-- /wp:greenshift-blocks/accordion -->

<!-- wp:paragraph -->
<p>There are many options, you can disable auto closing</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/accordion {"id":"gsbp-884958d","toggleone":false,"seoschema":false,"tabs":3,"shadow":{"hoffset":0,"voffset":32,"blur":48,"spread":0,"color":"","position":null}} -->
<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-884958d" id="gspb_accordion-id-gsbp-884958d" itemscope itemtype=""><!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-42c52b3","title":"First title","open":true,"seoschema":false} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-42c52b3 gsopen" id="gspb_accordionitem-gsbp-42c52b3" itemscope><div class="gs-accordion-item__title" aria-expanded="true" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-42c52b3"><div class="gs-accordion-item__heading">First title</div><meta itemprop="name" content="First title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-42c52b3" aria-hidden="false"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of accordion block and image</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":276,"width":"381px","height":"119px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp" alt="" class="wp-image-276" style="width:381px;height:119px"/></figure>
<!-- /wp:image --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-38a2240","title":"Second title","seoschema":false} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-38a2240 gsclose" id="gspb_accordionitem-gsbp-38a2240" itemscope><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-38a2240"><div class="gs-accordion-item__heading">Second title</div><meta itemprop="name" content="Second title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-38a2240" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of second section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem -->

<!-- wp:greenshift-blocks/accordionitem {"id":"gsbp-a4b3a52","title":"Third title","seoschema":false} -->
<div class="wp-block-greenshift-blocks-accordionitem gs-accordion-item gspb_accordionitem-gsbp-a4b3a52 gsclose" id="gspb_accordionitem-gsbp-a4b3a52" itemscope><div class="gs-accordion-item__title" aria-expanded="false" role="button" tabindex="0" aria-controls="gspb-accordion-item-content-gsbp-a4b3a52"><div class="gs-accordion-item__heading">Third title</div><meta itemprop="name" content="Third title"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div><div class="gs-accordion-item__content" itemscope id="gspb-accordion-item-content-gsbp-a4b3a52" aria-hidden="true"><div class="gs-accordion-item__text" itemprop="text"><!-- wp:paragraph {"placeholder":"Add content here or replace by custom block"} -->
<p>I am content of third section</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/accordionitem --></div>
<!-- /wp:greenshift-blocks/accordion -->

<!-- wp:paragraph -->
<p>You can also enable <a href="https://greenshiftwp.com/fancy/accordion-synchronization-with-slider/" data-type="fancy" data-id="4391">Accordion synchronization with slider</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Accordion block has also option to enable FAQ schema. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="dynamic-accordion">Dynamic Accordion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The accordion block doesn't support dynamic values, but you can use the Accordion Element block, which is based on the <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element block</a>. Element block supports repeatable data</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":5291} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2022/05/dynamicaccordion.mp4"></video></figure>
<!-- /wp:video -->