{"id":171115,"date":"2026-09-22T14:11:27","date_gmt":"2026-09-22T11:11:27","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=171115"},"modified":"2026-09-18T16:29:02","modified_gmt":"2026-09-18T13:29:02","slug":"how-to-use-the-accordion-element-in-the-atomic-editor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/","title":{"rendered":"How to Use the Accordion Element in the Atomic Editor"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><br>To create expandable content sections in Elementor, drag the native <strong>Accordion<\/strong> element from the Atomic Editor panel onto your canvas. Each Accordion item features customizable header controls and a nested container where you can place any Atomic element, adjust expansion rules (<strong>Default State<\/strong> and <strong>Max Items Expanded<\/strong>), enable AI-optimized <strong>FAQ schema<\/strong>, and reorder items seamlessly.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-1024x550.png\" alt=\"\" class=\"wp-image-171117\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-1024x550.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-300x161.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-768x413.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-1536x825.png 1536w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element.png 1794w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the Accordion element in the Atomic Editor?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike classic widgets, native Atomic Accordion items feature open canvas containers that support multi-level recursive nesting &#8211; allowing you to place Accordions directly inside other Accordions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When dropped directly onto an open canvas area outside an existing container, Elementor automatically wraps the Accordion inside a parent Flexbox container for easy repositioning across your layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How do you add an Accordion element to your page?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example Scenario:<\/strong> You want to add a clean, structured FAQ section to your service landing page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Requirements:<\/strong> Elementor Core and Pro version 4.3.0 or higher on WordPress 6.8+.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Elementor Editor for the page or template you want to edit.<\/li>\n\n\n\n<li>In the left panel, navigate to <strong>Atomic Elements<\/strong> and search for <strong>Accordion<\/strong>.<\/li>\n\n\n\n<li>Drag and drop the <strong>Accordion<\/strong> element directly onto your canvas.<br>(If dropped directly onto the canvas outside an existing container, notice that Elementor automatically wraps the Accordion inside a Flexbox container.<br><img decoding=\"async\" width=\"280\" height=\"554\" class=\"wp-image-171118\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/flex-container.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/flex-container.png 276w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/flex-container-152x300.png 152w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How do you manage Accordion items and nest content?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example Scenario:<\/strong> You are setting up business hours and contact details inside your FAQ Accordion.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the Accordion element on your canvas to open its side panel.<\/li>\n\n\n\n<li>In the <strong>Content<\/strong> tab, click <strong>Add Item<\/strong> to create additional accordion rows.<\/li>\n\n\n\n<li>Select an item to expand its header settings and enter your title (e.g., <em>&#8220;What are your business hours?&#8221;<\/em>).<br><img decoding=\"async\" width=\"280\" height=\"525\" class=\"wp-image-171119\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-item.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-item.png 324w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-item-160x300.png 160w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>To add content, click the Accordion item header on the canvas to open its nested container. <img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"376\" class=\"wp-image-171120\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/nested-container.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/nested-container.png 1421w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/nested-container-300x166.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/nested-container-1024x566.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/nested-container-768x425.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Drag any Atomic element &#8211; such as paragraph text (<em>&#8220;Our business hours are Monday to Friday, 9 AM to 5 PM.&#8221;<\/em>), images, buttons, or multi-column flex containers &#8211; directly into the item container.<\/li>\n\n\n\n<li>Reorder items by dragging them up or down within the <strong>Items<\/strong> list in the side panel (or via the <strong>Structure panel<\/strong> on the canvas).<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"449\" class=\"wp-image-171121\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/drag-side-panel.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/drag-side-panel.png 335w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/drag-side-panel-187x300.png 187w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How do you configure expansion settings, appearance, and FAQ schema?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example Scenario:<\/strong> You want to style the Accordion to match your brand colors while optimizing content for AI crawlers.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Configure Expansion Modes:<\/strong> Under <strong>Default State<\/strong>, choose <strong>First Expanded<\/strong> (top item open on page load) or <strong>All Collapsed<\/strong> (all items closed initially). Under <strong>Max Items Expanded<\/strong>, select <strong>One<\/strong> (opening an item closes others) or <strong>Multiple<\/strong> (allows multiple open items simultaneously).<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"509\" class=\"wp-image-171122\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/settings-default-expanded.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/settings-default-expanded.png 336w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/settings-default-expanded-165x300.png 165w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li><strong>Style Typography and Colors:<\/strong> Select the <strong>Style<\/strong> tab to customize overall container background colors, borders, item title typography, and content spacing.<\/li>\n\n\n\n<li><strong>Configure Header Icons:<\/strong> Toggle <strong>Show Icon<\/strong> to <strong>On <\/strong>and then customize toggle icons, icon alignment, and active colors.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"400\" class=\"wp-image-171123\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/show-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/show-icon.png 330w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/show-icon-210x300.png 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li><strong>Enable AI\/LLM FAQ Schema:<\/strong> Toggle <strong>Enable FAQ Schema<\/strong> to <strong>On<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"602\" class=\"wp-image-171124\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/faq-schema.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/faq-schema.png 317w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/faq-schema-139x300.png 139w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Important Note:<\/strong> The built-in FAQ schema is specifically structured to expose content hierarchy to AI crawlers, LLMs, and Markdown engines &#8211; it is not intended for Google Search rich snippets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What technical rules apply to Accordion icons and DOM markup?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Keep these automated behaviors in mind when designing Accordion headers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SVG Auto-Rotation:<\/strong> Placing an SVG icon inside the Accordion header automatically rotates it 180\u00b0 when the item expands. In version 4.3, this rotation trigger is permanent and cannot be disabled in settings. Non-SVG elements placed in the header will not rotate.<\/li>\n\n\n\n<li><strong>DOM-Level Icon Removal:<\/strong> When you disable or hide an item&#8217;s toggle icon, Elementor strips the icon markup completely from the page DOM. It is not hidden visually using CSS (display: none).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQs<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Can I nest any Elementor element inside an Accordion item?<\/strong><strong><br><\/strong>Yes. Each item contains an open container that supports any Atomic element, including buttons, forms, images, and other nested Accordions.<\/li>\n\n\n\n<li><strong>What happens if I drop the Accordion element at the root of the canvas?<\/strong><strong><br><\/strong>It automatically wraps inside a parent Flexbox container so you can move, drag, or space it like any standard modular element.<\/li>\n\n\n\n<li><strong>Does hiding the toggle icon leave extra code on my page?<\/strong><strong><br><\/strong>No. Disabling the icon completely removes the icon element from the HTML DOM.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>To create expandable content sections in Elementor, drag the native Accordion element from the Atomic Editor panel onto your canvas. Each Accordion item features customizable header controls and a nested container where you can place any Atomic element, adjust expansion rules (Default State and Max Items Expanded), enable AI-optimized FAQ schema, and reorder items seamlessly.\u00a0 [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1506],"tags":[],"class_list":["post-171115","post","type-post","status-publish","format-standard","hentry","category-v4-editor"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Accordion Element in the Atomic Editor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Accordion Element in the Atomic Editor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-22T11:11:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1794\" \/>\n\t<meta property=\"og:image:height\" content=\"964\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Saras\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saras\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/\"},\"author\":{\"name\":\"Saras\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\"},\"headline\":\"How to Use the Accordion Element in the Atomic Editor\",\"datePublished\":\"2026-09-22T11:11:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/\"},\"wordCount\":689,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/accordion-element-1024x550.png\",\"articleSection\":[\"Editor V4\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/\",\"name\":\"How to Use the Accordion Element in the Atomic Editor | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/accordion-element-1024x550.png\",\"datePublished\":\"2026-09-22T11:11:27+00:00\",\"description\":\"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/accordion-element.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/accordion-element.png\",\"width\":1794,\"height\":964},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-use-the-accordion-element-in-the-atomic-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Editor V4\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/v4-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Use the Accordion Element in the Atomic Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\",\"name\":\"Saras\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"caption\":\"Saras\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Accordion Element in the Atomic Editor | Elementor","description":"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Accordion Element in the Atomic Editor | Elementor","og_description":"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/","og_site_name":"Help","article_published_time":"2026-09-22T11:11:27+00:00","og_image":[{"width":1794,"height":964,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element.png","type":"image\/png"}],"author":"Saras","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saras"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/"},"author":{"name":"Saras","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d"},"headline":"How to Use the Accordion Element in the Atomic Editor","datePublished":"2026-09-22T11:11:27+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/"},"wordCount":689,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-1024x550.png","articleSection":["Editor V4"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/","url":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/","name":"How to Use the Accordion Element in the Atomic Editor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element-1024x550.png","datePublished":"2026-09-22T11:11:27+00:00","description":"Learn everything about How to Use the Accordion Element in the Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/accordion-element.png","width":1794,"height":964},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-use-the-accordion-element-in-the-atomic-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/v4-editor\/"},{"@type":"ListItem","position":4,"name":"How to Use the Accordion Element in the Atomic Editor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d","name":"Saras","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","caption":"Saras"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=171115"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171115\/revisions"}],"predecessor-version":[{"id":171125,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171115\/revisions\/171125"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=171115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=171115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=171115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}