{"id":868,"date":"2026-05-12T21:23:49","date_gmt":"2026-05-12T21:23:49","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?p=868"},"modified":"2026-10-02T14:24:40","modified_gmt":"2026-10-02T14:24:40","slug":"accordion-block","status":"publish","type":"post","link":"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/12\/accordion-block\/","title":{"rendered":"Accordion Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Accordion block allows you to organize content into expandable sections that users can open and close. This is useful for FAQs or pages with a lot of information, as it helps keep content compact and easier to navigate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find demos and usage guidance for this block on the official <a href=\"https:\/\/wordpress.org\/documentation\/article\/accordion-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility Best Practice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use clear, descriptive headings for each section so users understand what content is hidden before expanding it.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Keep in Mind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Over styling this block can become overwhelming to our end-user. It is best to keep this simple and legible.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Accordion Example<\/h2>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&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-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-title\">Accordion Title<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert 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 class=\"wp-block-paragraph\">Text hidden behind the accordion functionality.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Accordion block allows you to organize content into expandable sections that users can open and close. This is useful for FAQs or pages with a lot of information, as it helps keep content compact and easier to navigate.<\/p>\n","protected":false},"author":4,"featured_media":869,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[34,27,8],"class_list":["post-868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blocks","tag-accordion","tag-design-block","tag-wordpress-blocks"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":1,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/868\/revisions"}],"predecessor-version":[{"id":2159,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/868\/revisions\/2159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media\/869"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/categories?post=868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/tags?post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}