Accordion - Greenshift

Blog Staff

May 3, 2022

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.

Accordion block has FAQ Seo Schema option. Check other blocks with SEO Schema

Spoiler example

Spoiler Block

Accordion block example

First title

I am content of accordion block and image

Second title

Third title

You can also change styles of accordion block

First title

I am content of accordion block and image

Second title

Third title

There are many options, you can disable auto closing

First title

I am content of accordion block and image

Second title

Third title

You can also enable Accordion synchronization with slider

Accordion block has also option to enable FAQ schema.

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<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>

<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">
<p>Accordion block has FAQ Seo Schema option. Check other blocks with <a href="/tag/seo-schema/">SEO Schema</a></p>
</div></div></div>

<h3 class="wp-block-heading" id="spoiler-example">Spoiler example</h3>

<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-5363ae9e-8ab8" id="gspb_accordion-id-gsbp-5363ae9e-8ab8" itemscope itemtype="">
<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">
<p>This block is closed on loading</p>
</div></div></div>
</div>

<h3 class="wp-block-heading" id="accordion-block-example">Accordion block example</h3>

<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">
<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">
<p>I am content of accordion block and image</p>

<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" width="381" height="119"/></figure>
</div></div></div>

<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">
<p>I am content of second section</p>
</div></div></div>

<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">
<p>I am content of third section</p>
</div></div></div>
</div>

<p>You can also change styles of accordion block</p>

<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-db86d83 togglelogic" id="gspb_accordion-id-gsbp-db86d83" itemscope itemtype="">
<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">
<p>I am content of accordion block and image</p>

<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">
<p>I am content of second section</p>
</div></div></div>

<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">
<p>I am content of third section</p>
</div></div></div>
</div>

<p>There are many options, you can disable auto closing</p>

<div class="wp-block-greenshift-blocks-accordion gs-accordion gspb_accordion-id-gsbp-884958d" id="gspb_accordion-id-gsbp-884958d" itemscope itemtype="">
<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">
<p>I am content of accordion block and image</p>

<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">
<p>I am content of second section</p>
</div></div></div>

<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">
<p>I am content of third section</p>
</div></div></div>
</div>

<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>

<p>Accordion block has also option to enable FAQ schema. </p>

containers, interactions, seo schema