{"id":16366403,"date":"2025-12-02T20:00:00","date_gmt":"2025-12-02T20:00:00","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&#038;p=16366403"},"modified":"2026-05-25T13:32:14","modified_gmt":"2026-05-25T13:32:14","slug":"accordion-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/accordion-block\/","title":{"rendered":"Accordion block"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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. Each Accordion contains Accordion Item blocks. Every item has:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accordion Heading: the clickable title.<\/li>\n\n\n\n<li>Accordion Panel: the content that expands and collapses. You can add any blocks in the panel.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WordPress 6.9 or later.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add the Accordion block<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open a post or page in the editor.<\/li>\n\n\n\n<li>Select where you want the accordion to appear.<\/li>\n\n\n\n<li>Open the block inserter (+) and search for \u201cAccordion.\u201d<\/li>\n\n\n\n<li>Select Accordion to add it to your content.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add, edit, and reorder Accordion Items<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a new item: Click the + Add accordion item button inside the block (or use the inserter at the end of the list).<\/li>\n\n\n\n<li>Edit a heading: Click the Accordion Heading and type a short, descriptive title.<\/li>\n\n\n\n<li>Add content: Click inside the Accordion Panel and add any blocks you need (paragraphs, images, lists, etc.).<\/li>\n\n\n\n<li>Reorder items: Use the move handles in the toolbar or drag items in List View to change the order.<\/li>\n\n\n\n<li>Expand\/collapse while editing: Click a heading to toggle the panel open or closed so you can focus on one item at a time.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you select:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accordion: You\u2019ll see alignment and positioning controls, plus handles to move the entire accordion.<\/li>\n\n\n\n<li>Accordion Item: You\u2019ll see move\/drag controls and basic formatting for the heading. Use List View to quickly select the Heading or Panel inside an item.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Block settings<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Open by default<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When on, Accordion content will be displayed by default.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Auto-close<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When on, this will automatically close accordions when a new one is opened.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show icon<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When on, an icon will display with an additional option to select it to display on the right or left side.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Icon position <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Position the icon to the left or right of the the accordion title.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Accordion block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), and Styles.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on your theme, you may see controls for colors, typography, borders, and spacing. These affect the overall look of headings and panels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accordion inner blocks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Accordion block is made of a few blocks to pull the feature together:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accordion item<\/li>\n\n\n\n<li>Accordion panel<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These inner blocks may include additional style controls depending on your theme (colors, typography, spacing). For the Accordion item, you can pick the semantic heading level for the item\u2019s title (for example, H3, H4). Use levels that fit your page outline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep headings short and descriptive so visitors know what each item contains.<\/li>\n\n\n\n<li>Use consistent heading levels across items (for example, all H3s) that fit your page\u2019s heading structure.<\/li>\n\n\n\n<li>For long content, consider splitting items into smaller sections or using lists inside the panel.<\/li>\n\n\n\n<li>Save frequently used accordions (like an FAQ) as a Pattern so you can reuse them across your site.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Accordion block follows accessible patterns so headings act as buttons and panels announce their expanded\/collapsed state to assistive technologies.<\/li>\n\n\n\n<li>Best practices:\n<ul class=\"wp-block-list\">\n<li>Use meaningful, concise headings.<\/li>\n\n\n\n<li>Avoid placing interactive elements (like links or buttons) inside the heading itself; put them in the panel.<\/li>\n\n\n\n<li>Choose heading levels that follow your page hierarchy.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Demo<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2160\" style=\"aspect-ratio: 3840 \/ 2160;\" width=\"3840\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/11\/6-9-accordion-i3.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What\u2019s the difference between Accordion and Details?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Details creates a single collapsible section. Accordion is a list of coordinated collapsible items with options to allow one or multiple open at once.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Can I open more than one item at the same time?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Yes. Turn on \u201cAllow multiple items to be open\u201d in the Accordion block settings.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How do I make a specific item open by default?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the Accordion Item, then enable \u201cInitially open\u201d in its settings.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Can I add any blocks inside an Accordion Panel?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Yes. Panels can contain any blocks, including images, lists, and embeds.<\/li>\n<\/ul>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<h2 class=\"wp-block-heading has-medium-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2025-12-02<\/li>\n<\/ul>\n<\/div>\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. Each Accordion contains Accordion Item blocks. Every item has: Requirements Add the Accordion block Add, edit, and reorder Accordion [&hellip;]<\/p>\n","protected":false},"author":13782018,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,88],"class_list":["post-16366403","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-design-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16366403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/13782018"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16366403"}],"version-history":[{"count":4,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16366403\/revisions"}],"predecessor-version":[{"id":16368513,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16366403\/revisions\/16368513"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16366403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16366403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}