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

This block is closed on loading

Accordion block example

First title

I am content of accordion block and image

Second title

I am content of second section

Third title

I am content of third section

You can also change styles of accordion block

First title

I am content of accordion block and image

Second title highlighted

I am content of second section

Third title

I am content of third section

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> <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 id="gspb_infoBox-id-gsbp-725bff57-9b6a" class="gspb_infoBox gspb_infoBox-id-gsbp-725bff57-9b6a wp-block-greenshift-blocks-infobox"> <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 id="gspb_accordion-id-gsbp-5363ae9e-8ab8" class="gs-accordion gspb_accordion-id-gsbp-5363ae9e-8ab8 wp-block-greenshift-blocks-accordion " itemscope itemtype=""> <div id="gspb_accordionitem-gsbp-d21d0371-6b97" class="gs-accordion-item gspb_accordionitem-gsbp-d21d0371-6b97 wp-block-greenshift-blocks-accordionitem gsclose" itemscope> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">Spoiler Block</h3> <p><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> <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 id="gspb_accordion-id-gsbp-ac4d81b4-6b1e" class="gs-accordion gspb_accordion-id-gsbp-ac4d81b4-6b1e wp-block-greenshift-blocks-accordion togglelogic" itemscope itemtype="https://schema.org/FAQPage"> <div id="gspb_accordionitem-gsbp-d443f5e8-0135" class="gs-accordion-item gspb_accordionitem-gsbp-d443f5e8-0135 wp-block-greenshift-blocks-accordionitem gsopen" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">First title</h3> <p><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"> <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 decoding="async" src="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp" alt="" class="wp-image-276" width="381" height="119" srcset="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp 762w, https://greenshiftwp.com/wp-content/uploads/2022/04/insight-300x94.webp 300w" sizes="(max-width: 381px) 100vw, 381px" /></figure> </div> </div> </div> <div id="gspb_accordionitem-gsbp-badb1f48-71b3" class="gs-accordion-item gspb_accordionitem-gsbp-badb1f48-71b3 wp-block-greenshift-blocks-accordionitem gsclose" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">Second title</h3> <p><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"> <div class="gs-accordion-item__text" itemprop="text"> <p>I am content of second section</p> </div> </div> </div> <div id="gspb_accordionitem-gsbp-5baa9a57-e9d0" class="gs-accordion-item gspb_accordionitem-gsbp-5baa9a57-e9d0 wp-block-greenshift-blocks-accordionitem gsclose" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">Third title</h3> <p><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"> <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 id="gspb_accordion-id-gsbp-6ec7421f-3d15" class="gs-accordion gspb_accordion-id-gsbp-6ec7421f-3d15 wp-block-greenshift-blocks-accordion togglelogic" itemscope itemtype=""> <div id="gspb_accordionitem-gsbp-de9636c7-df5b" class="gs-accordion-item gspb_accordionitem-gsbp-de9636c7-df5b wp-block-greenshift-blocks-accordionitem gsclose" itemscope> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">First title</h3> <p><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> <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 decoding="async" src="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp" alt="" class="wp-image-276" width="381" height="119" srcset="https://greenshiftwp.com/wp-content/uploads/2022/04/insight.webp 762w, https://greenshiftwp.com/wp-content/uploads/2022/04/insight-300x94.webp 300w" sizes="(max-width: 381px) 100vw, 381px" /></figure> </div> </div> </div> <div id="gspb_accordionitem-gsbp-a2d083f6-2796" class="gs-accordion-item gspb_accordionitem-gsbp-a2d083f6-2796 wp-block-greenshift-blocks-accordionitem gsclose" itemscope> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">Second title highlighted</h3> <p><meta itemprop="name" content="Second title highlighted"/><span class="iconfortoggle"><span class="gs-iconbefore"></span><span class="gs-iconafter"></span></span></div> <div class="gs-accordion-item__content" itemscope> <div class="gs-accordion-item__text" itemprop="text"> <p>I am content of second section</p> </div> </div> </div> <div id="gspb_accordionitem-gsbp-2095ff5a-8aca" class="gs-accordion-item gspb_accordionitem-gsbp-2095ff5a-8aca wp-block-greenshift-blocks-accordionitem gsclose" itemscope> <div class="gs-accordion-item__title"> <h3 class="gs-accordion-item__heading">Third title</h3> <p><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> <div class="gs-accordion-item__text" itemprop="text"> <p>I am content of third section</p> </div> </div> </div> </div> <p>Accordion block has also option to enable FAQ schema. </p> <p>