Accordion Block

The accordion block is an advanced Gutenberg block.

Create FAQ-style sections in the form of expandable/collapsible dropdowns.

You can copy the demo to your site via the “Copy Pattern” button.

Demo

This is an example representation of what you can create with the Accordion Block (block pattern) that can be easily customized through the WordPress Block Editor. You can copy and paste the provided pattern to your website by clicking on the “Copy Pattern” button below. All you need is a WordPress installation with the Nasio Blocks plugin installed and activated.

Example: Frequently Asked Questions

<!-- wp:group {"metadata":{"categories":["prespa"],"patternName":"prespa/faq","name":"FAQ"},"align":"full","className":"nasio-pattern section-faq","style":{"color":{"background":"#f8f8f8"}},"layout":{"type":"constrained","contentSize":"980px","wideSize":"1180px"}} -->
<div class="wp-block-group alignfull nasio-pattern section-faq has-background" style="background-color:#f8f8f8"><!-- wp:spacer {"height":"2rem"} -->
<div style="height:2rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center","className":"wp-block-heading","style":{"elements":{"link":{"color":{"text":"var:preset|color|dark-gray"}}}},"textColor":"dark-gray","fontSize":"large"} -->
<h2 class="wp-block-heading has-text-align-center has-dark-gray-color has-text-color has-link-color has-large-font-size">Frequently Asked Questions</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"1rem"} -->
<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|small"}}}} -->
<div class="wp-block-columns" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|small","top":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:nasio-block/accordion {"headerBackgroundColor":"#eeeeee"} -->
<div class="wp-block-nasio-block-accordion nasio-accordion" data-default-open="" style="--nasio-blocks-accordion-header-bgr-color:#eeeeee"><!-- wp:nasio-block/accordion-item {"title":"Cras ultricies ligula sed magna dictum porta demis?","blockId":"2f57a2c0-d6f3-4e43-8f7f-2c95dea38dd7"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="2f57a2c0-d6f3-4e43-8f7f-2c95dea38dd7"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Cras ultricies ligula sed magna dictum porta demis?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item -->

<!-- wp:nasio-block/accordion-item {"title":"Nulla porttitor accumsan tincidunt incendra antes?","blockId":"516e8a64-cf05-4304-acc1-250a20bfddc2"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="516e8a64-cf05-4304-acc1-250a20bfddc2"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Nulla porttitor accumsan tincidunt incendra antes?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item -->

<!-- wp:nasio-block/accordion-item {"title":"Praesent sapien massa, convallis a pellentesque dir?","blockId":"db7fa944-c2ea-41ba-ad78-fcf2b31e028f"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="db7fa944-c2ea-41ba-ad78-fcf2b31e028f"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Praesent sapien massa, convallis a pellentesque dir?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item --></div>
<!-- /wp:nasio-block/accordion --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:nasio-block/accordion {"headerBackgroundColor":"#eeeeee"} -->
<div class="wp-block-nasio-block-accordion nasio-accordion" data-default-open="" style="--nasio-blocks-accordion-header-bgr-color:#eeeeee"><!-- wp:nasio-block/accordion-item {"title":"Nulla quis lorem ut libero malesuada feugiat estro?","blockId":"442c6a7d-3dcf-4a3a-bd6b-60cd1f70daf1"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="442c6a7d-3dcf-4a3a-bd6b-60cd1f70daf1"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Nulla quis lorem ut libero malesuada feugiat estro?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item -->

<!-- wp:nasio-block/accordion-item {"title":"Curabitur aliquet quam id dui posuere dolor sit amet?","blockId":"acffc40d-2db0-46eb-9df4-5f580837bf3e"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="acffc40d-2db0-46eb-9df4-5f580837bf3e"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Curabitur aliquet quam id dui posuere dolor sit amet?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item -->

<!-- wp:nasio-block/accordion-item {"title":"Pellentesque in ipsum id orci porta dapibus atemis?","blockId":"9d964167-80fc-4c18-9421-8680d6beb565"} -->
<div class="wp-block-nasio-block-accordion-item nasio-accordion-item" data-block-id="9d964167-80fc-4c18-9421-8680d6beb565"><button class="nasio-accordion-item-header" aria-expanded="false" type="button"><h3 class="nasio-accordion-item-title">Pellentesque in ipsum id orci porta dapibus atemis?</h3><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" class="nasio-accordion-icon"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg></button><div class="nasio-accordion-item-content"><div class="nasio-accordion-item-content-inner"><!-- wp:paragraph {"placeholder":"Add content here..."} -->
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neq.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:nasio-block/accordion-item --></div>
<!-- /wp:nasio-block/accordion --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"1rem"} -->
<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

Copy Pattern