{"id":970,"date":"2026-05-13T16:03:58","date_gmt":"2026-05-13T16:03:58","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?p=970"},"modified":"2026-09-17T22:56:44","modified_gmt":"2026-09-17T22:56:44","slug":"mtsu-expandable-blocks","status":"publish","type":"post","link":"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/13\/mtsu-expandable-blocks\/","title":{"rendered":"MTSU Expandable Blocks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The MTSU Expandable Blocks allow 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<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\">Expandable Block Examples<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Style 1<\/h4>\n\n\n\n<div class=\"wp-block-mtsu-blocks-expandable-block accordion expandable-group expandable-group-faq\" id=\"EB02\">\n<div class=\"wp-block-mtsu-blocks-expandable-item accordion-item expandable-heading expandable-heading-faq\"><h2 class=\"accordion-header\" id=\"headingexpandable-block-style-1-box-1\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseEB02expandable-block-style-1-box-1\" aria-expanded=\"false\" aria-controls=\"collapseEB02expandable-block-style-1-box-1\">Expandable Block Style 1 Box 1<\/button><\/h2><div id=\"collapseEB02expandable-block-style-1-box-1\" class=\"accordion-collapse collapse expandable-content expandable-content-faq\" aria-labelledby=\"headingexpandable-block-style-1-box-1\" data-bs-parent=\"#EB02\"><div class=\"accordion-body\">\n<p class=\"has-standard-color has-text-color has-link-color wp-elements-4b005a48d716c3cd68564d27631cc9d6 wp-block-paragraph\">Here&#8217;s some information for this block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A 2nd paragraph of information.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mtsu-blocks-expandable-item accordion-item expandable-heading expandable-heading-faq\"><h2 class=\"accordion-header\" id=\"headingexpandable-block-style-1-box-2\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseEB02expandable-block-style-1-box-2\" aria-expanded=\"false\" aria-controls=\"collapseEB02expandable-block-style-1-box-2\">Expandable Block Style 1 Box 2<\/button><\/h2><div id=\"collapseEB02expandable-block-style-1-box-2\" class=\"accordion-collapse collapse expandable-content expandable-content-faq\" aria-labelledby=\"headingexpandable-block-style-1-box-2\" data-bs-parent=\"#EB02\"><div class=\"accordion-body\">\n<p class=\"has-standard-color has-text-color has-link-color wp-elements-4b005a48d716c3cd68564d27631cc9d6 wp-block-paragraph\">Here&#8217;s some information for this block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A 2nd paragraph of information.<\/p>\n<\/div><\/div><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Style 2<\/h4>\n\n\n\n<div class=\"wp-block-mtsu-blocks-expandable-block accordion expandable-group expandable-group-lightblock\" id=\"EB04\">\n<div class=\"wp-block-mtsu-blocks-expandable-item accordion-item expandable-heading expandable-heading-lightblock\"><h2 class=\"accordion-header\" id=\"headingexpandable-block-style-2-box-1\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseEB04expandable-block-style-2-box-1\" aria-expanded=\"false\" aria-controls=\"collapseEB04expandable-block-style-2-box-1\">Expandable Block Style 2 Box 1<\/button><\/h2><div id=\"collapseEB04expandable-block-style-2-box-1\" class=\"accordion-collapse collapse expandable-content expandable-content-lightblock\" aria-labelledby=\"headingexpandable-block-style-2-box-1\" data-bs-parent=\"#EB04\"><div class=\"accordion-body\">\n<p class=\"has-standard-color has-text-color has-link-color wp-elements-4b005a48d716c3cd68564d27631cc9d6 wp-block-paragraph\">Here&#8217;s some information for this block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A 2nd paragraph of information.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mtsu-blocks-expandable-item accordion-item expandable-heading expandable-heading-lightblock\"><h2 class=\"accordion-header\" id=\"headingexpandable-block-style-2-box-2\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseEB04expandable-block-style-2-box-2\" aria-expanded=\"false\" aria-controls=\"collapseEB04expandable-block-style-2-box-2\">Expandable Block Style 2 Box 2<\/button><\/h2><div id=\"collapseEB04expandable-block-style-2-box-2\" class=\"accordion-collapse collapse expandable-content expandable-content-lightblock\" aria-labelledby=\"headingexpandable-block-style-2-box-2\" data-bs-parent=\"#EB04\"><div class=\"accordion-body\">\n<p class=\"has-standard-color has-text-color has-link-color wp-elements-4b005a48d716c3cd68564d27631cc9d6 wp-block-paragraph\">Here&#8217;s some information for this block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A 2nd paragraph of information.<\/p>\n<\/div><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The MTSU Expandable Blocks allow 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":971,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[48,49,8],"class_list":["post-970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blocks","tag-expandable-block","tag-mtsu-blocks","tag-wordpress-blocks"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/970","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=970"}],"version-history":[{"count":0,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media\/971"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/categories?post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/tags?post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}