{"id":282,"date":"2026-05-15T15:20:04","date_gmt":"2026-05-15T15:20:04","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&#038;p=282"},"modified":"2026-06-12T12:27:44","modified_gmt":"2026-06-12T12:27:44","password":"","slug":"akkordeon","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/akkordeon\/","title":{"rendered":"Accordion"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"282\" class=\"elementor elementor-282\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6496582f e-con-full e-flex e-con e-parent\" data-id=\"6496582f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79e85bd4 elementor-widget elementor-widget-text-editor\" data-id=\"79e85bd4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Application<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p>The accordion element is perfect for presenting content in a space-saving and clear manner. Learners can expand and collapse individual sections as needed, making long content more structured and easier to digest.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f0f155 elementor-widget elementor-widget-spacer\" data-id=\"9f0f155\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a6177f5 elementor-widget elementor-widget-text-editor\" data-id=\"7a6177f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Video tutorial<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p>Learn in the following video tutorial how to create the element<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24a01200 elementor-widget elementor-widget-video\" data-id=\"24a01200\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;vimeo&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"Vimeo video player\" src=\"https:\/\/player.vimeo.com\/video\/1198577688?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19956b4f e-con-full e-flex e-con e-parent\" data-id=\"19956b4f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58d456b elementor-widget elementor-widget-spacer\" data-id=\"58d456b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2648b8e elementor-widget elementor-widget-text-editor\" data-id=\"2648b8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 1 \u2013 Add Accordion<\/h2><div id=\"model-response-message-contentr_a9f677e6d41788df\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">Drag the accordion element into a module.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-747ad513 elementor-widget elementor-widget-image\" data-id=\"747ad513\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/05\/1-13.jpg\" title=\"1\" alt=\"1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32de96fc elementor-widget elementor-widget-spacer\" data-id=\"32de96fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72db6bbf elementor-widget elementor-widget-text-editor\" data-id=\"72db6bbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 2 \u2013 Layout Settings<\/h2><p>Check out the hotspots to see what customization options you have for the accordion element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3057060b elementor-widget elementor-widget-hotspots\" data-id=\"3057060b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/05\/klein.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 70%; left: 34.5%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Large<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">If you choose the large view of the accordion, each accordion tab is displayed wide.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 70%; left: 67.5%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Small<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">If you choose the compact accordion view, each accordion tab will be displayed narrower.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-caeff0b elementor-widget elementor-widget-spacer\" data-id=\"caeff0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1032161 elementor-widget elementor-widget-text-editor\" data-id=\"1032161\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Manage accordions<\/h2><p>Check out the hotspots to see what management options you have for the accordion element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64b51a4 elementor-widget elementor-widget-hotspots\" data-id=\"64b51a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/05\/Slides-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 20%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Add section<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click Add Section to insert another section into the accordion.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 47%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Section layout<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Swap the order of the sections by clicking and dragging the move icon.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 77%; left: 60%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Delete sections<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Delete sections by clicking the trash can icon.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-770ef1b8 elementor-widget elementor-widget-spacer\" data-id=\"770ef1b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aede008 elementor-widget elementor-widget-text-editor\" data-id=\"aede008\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Step 3 \u2013 Edit content<\/h2><p>Check the hotspots to see how to populate the accordion element with content.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7b15ec elementor-widget elementor-widget-hotspots\" data-id=\"b7b15ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/05\/editoeren.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 19%; left: 48%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Section Title<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Add a title to the section. You can type this directly into the accordion element itself or into the edit box.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 37%; left: 75%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Edit content<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click on Edit Content or directly on the edit icon within the element when you expand the accordion, and edit the tab as an overlay.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42257a0b elementor-widget elementor-widget-spacer\" data-id=\"42257a0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Anwendung Das Akkordeon Element eignet sich perfekt, um Inhalte platzsparend und \u00fcbersichtlich darzustellen. Lernende k\u00f6nnen einzelne Bereiche bei Bedarf aufklappen und wieder schlie\u00dfen, wodurch lange Inhalte strukturierter und leichter erfassbar werden. Video Anleitung Erfahre in dem folgenden Video Tutorial, wie du das Element erstellst https:\/\/vimeo.com\/1198577688 Schritt 1 &#8211; Akkordeon Hinzuf\u00fcgen Ziehe das Akkordeon Element in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[11],"doc_tag":[],"class_list":["post-282","docs","type-docs","status-publish","hentry","doc_category-inhaltselemente"],"year_month":"2026-09","word_count":244,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Creator - Inhalt - Elemente","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/inhaltselemente\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":55,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/282\/revisions"}],"predecessor-version":[{"id":3603,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/282\/revisions\/3603"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=282"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=282"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}