{"id":1529,"date":"2026-06-10T10:12:48","date_gmt":"2026-06-10T09:12:48","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/?p=1529"},"modified":"2026-06-10T10:12:49","modified_gmt":"2026-06-10T09:12:49","slug":"accordion","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/2026\/06\/10\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The Accordion block lets you show content in collapsible sections so visitors can expand just the parts they need. It\u2019s commonly used for FAQs, schedules, or any long page you want to make easier to scan.<\/p>\n<cite>from: <a href=\"https:\/\/wordpress.org\/documentation\/article\/accordion-block\/\">Accordion block \u2013 Documentation \u2013 WordPress.org<\/a><\/cite><\/blockquote>\n\n\n\n<p>This should be a useful block to present a lot of information when viewers may want to skim down the heading. The Block consists of a series of one or more Accordion Items each of which has an Accordion Heading and an Accordion Panel. The Panel can contain other blocks, paragraphs, lists images etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example Accordion<\/h2>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: true, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion has-tertiary-background-color has-background is-layout-flow wp-block-accordion-is-layout-flow\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: true }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-open is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"true\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><span class=\"wp-block-accordion-heading__toggle-title\">Open by Default<\/span><\/button><\/h3>\n\n\n\n<div aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p>An <em>Accordion Item <\/em>can be set, like this one, to be open.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><span class=\"wp-block-accordion-heading__toggle-title\">New Items<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-2\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p>When working in an accordion, choosing <em>Add after<\/em> from the block tool bar of the Item will insert another <em>Accordion Item<\/em>. Pressing the return key while editing a block inside the Accordion Panel will insert another block in the panel.<\/p>\n\n\n\n<p>You may find it useful to have the <a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/tag\/document-overview-tip\/\" data-type=\"post_tag\" data-id=\"33\">Document Overview<\/a> open when editing an Accordion.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><span class=\"wp-block-accordion-heading__toggle-title\">Screenshot<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-3\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"836\" data-attachment-id=\"1530\" data-permalink=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/2026\/06\/10\/accordion\/accordion-overview\/\" data-orig-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview.png\" data-orig-size=\"706,836\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"accordion-overview\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview-253x300.png\" data-large-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview.png\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview.png\" alt=\"Screenshot of the Document Overview sidebar in wordpress showing an expander accordian\" class=\"wp-image-1530\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview.png 706w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/blocks\/uploads\/sites\/9576\/2026\/06\/10100842\/accordion-overview-253x300.png 253w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Accordion block lets you show content in collapsible sections so visitors can expand just the parts they need. It\u2019s commonly used for FAQs, schedules, or any long page you want to make easier to scan.<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1529","post","type-post","status-publish","format-standard","hentry","category-design-blocks"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/posts\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":3,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/posts\/1529\/revisions"}],"predecessor-version":[{"id":1533,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/posts\/1529\/revisions\/1533"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/media?parent=1529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/categories?post=1529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/blocks\/wp-json\/wp\/v2\/tags?post=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}