{"id":2037,"date":"2026-10-14T04:31:47","date_gmt":"2026-10-14T04:31:47","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2037"},"modified":"2026-10-14T10:30:56","modified_gmt":"2026-10-14T10:30:56","password":"","slug":"accordion","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n

The Accordion Block lets you display questions and answers in collapsible sections. Visitors can click a question to expand its answer, making it easier to organize FAQs and other content in a compact layout.<\/p>\n\n\n\n

You can customize the questions, answers, icons, spacing, colors, typography, borders, and other styling options to match your website design.<\/p>\n\n\n\n

How to Add an Accordion Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Accordion Block in the Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Accordion Block<\/h3>\n\n\n\n
    \n
  1. Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n
  2. Click the +<\/strong> button to open the block inserter.<\/li>\n\n\n\n
  3. Search for Accordion<\/strong> under ShapeBlock.<\/li>\n\n\n\n
  4. Insert the Accordion Block into your page.<\/li>\n\n\n\n
  5. Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n
  6. Add or edit questions and answers using the Items panel.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Accordion Block<\/h3>\n\n\n\n

    Select the Accordion Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add and manage accordion items, configure the title tag and icons, and control the default opening behavior.<\/li>\n\n\n\n
    • Layout:<\/strong> Configure the spacing between accordion items and the position of the accordion icons.<\/li>\n\n\n\n
    • Style:<\/strong> Customize the appearance of accordion items, question titles, answers, and accordion icons.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure the shared advanced settings available for ShapeBlock blocks.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      Use the Settings tab to manage accordion items and configure the general behavior of the block.<\/p>\n\n\n\n

      1. Items<\/h3>\n\n\n\n

      Use the Items panel to create and manage questions and answers.<\/p>\n\n\n\n

        \n
      • Question:<\/strong> Enter the question displayed in the accordion header.<\/li>\n\n\n\n
      • Answer:<\/strong> Add the answer displayed when the question is expanded. Basic HTML, such as links and line breaks, is supported.<\/li>\n\n\n\n
      • Open by Default:<\/strong> Choose whether an individual accordion item should be open by default.<\/li>\n<\/ul>\n\n\n\n

        Item Management Actions:<\/strong><\/p>\n\n\n\n

          \n
        • Move Up:<\/strong> Move an item higher in the list.<\/li>\n\n\n\n
        • Move Down:<\/strong> Move an item lower in the list.<\/li>\n\n\n\n
        • Duplicate:<\/strong> Create a copy of an existing item.<\/li>\n\n\n\n
        • Remove:<\/strong> Delete an item from the accordion.<\/li>\n\n\n\n
        • Add Item:<\/strong> Add a new question and answer.<\/li>\n<\/ul>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          2. General<\/h3>\n\n\n\n

          Use the General panel to configure the accordion title tag, icons, and opening behavior.<\/p>\n\n\n\n

            \n
          • Title HTML Tag:<\/strong> Choose the HTML tag used for question titles, including H1\u2013H6, div, span, or p.<\/li>\n\n\n\n
          • Open Icon (expanded):<\/strong> Choose the icon displayed when an accordion item is expanded.<\/li>\n\n\n\n
          • Close Icon (collapsed):<\/strong> Choose the icon displayed when an accordion item is collapsed.<\/li>\n\n\n\n
          • Open All FAQs by Default:<\/strong> Keep all accordion answers open by default.<\/li>\n\n\n\n
          • Enable Sticky:<\/strong> Enable sticky behavior for the accordion when Open All FAQs by Default is enabled.<\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            Layout Tab<\/h2>\n\n\n\n

            Use the Layout tab to control the spacing between accordion items and the position of the accordion icons.<\/p>\n\n\n\n

            1. Spacing & Position<\/h3>\n\n\n\n
              \n
            • Items Space (gap px):<\/strong> Set the space between accordion items. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
            • Icon Position:<\/strong> Choose whether the accordion icon appears on the right or left side of the question.<\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Style Tab<\/h2>\n\n\n\n

              Use the Style tab to customize the appearance of accordion items, question titles, answers, and accordion icons.<\/p>\n\n\n\n

              1. Items<\/h3>\n\n\n\n

              Customize the overall appearance of each accordion item.<\/p>\n\n\n\n

                \n
              • Background:<\/strong> Set the item background color or gradient.<\/li>\n\n\n\n
              • Border:<\/strong> Customize the item border width, color, and style.<\/li>\n\n\n\n
              • Box Shadow:<\/strong> Add and customize a shadow around the item.<\/li>\n\n\n\n
              • Border Radius:<\/strong> Set the radius of the item corners.<\/li>\n\n\n\n
              • Item Padding:<\/strong> Adjust the inner spacing of each item. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                The Background, Border, and Box Shadow controls support Normal, Hover, and Active<\/strong> states where applicable.<\/p>\n\n\n\n

                2. Title<\/h3>\n\n\n\n

                Use the Title panel to customize the appearance of accordion questions.<\/p>\n\n\n\n

                  \n
                • Typography:<\/strong> Customize the question typography, including responsive settings for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                • Color:<\/strong> Set the question text color.<\/li>\n\n\n\n
                • Question Background:<\/strong> Set the question background color or gradient.<\/li>\n\n\n\n
                • Question Border:<\/strong> Customize the question border.<\/li>\n\n\n\n
                • Question Box Shadow:<\/strong> Add a shadow to the question header.<\/li>\n\n\n\n
                • Question Padding:<\/strong> Adjust the inner spacing around the question text. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                • Question Border Radius:<\/strong> Customize the corner radius of the question header.<\/li>\n<\/ul>\n\n\n\n

                  The available question styling controls include Normal, Hover, and Active<\/strong> states.<\/p>\n\n\n\n

                  3. Description<\/h3>\n\n\n\n

                  Use the Description panel to customize the appearance of accordion answers.<\/p>\n\n\n\n

                    \n
                  • Typography:<\/strong> Customize the answer typography, including responsive settings for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                  • Color:<\/strong> Set the answer text color.<\/li>\n\n\n\n
                  • Background:<\/strong> Set the answer background color or gradient.<\/li>\n\n\n\n
                  • Border:<\/strong> Customize the answer border.<\/li>\n\n\n\n
                  • Border Color:<\/strong> Set the answer border color for the Hover and Active states.<\/li>\n\n\n\n
                  • Border Radius:<\/strong> Customize the corner radius of the answer area.<\/li>\n\n\n\n
                  • Answer Padding:<\/strong> Adjust the inner spacing around the answer content. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                    The available answer styling controls include Normal, Hover, and Active<\/strong> states where applicable.<\/p>\n\n\n\n

                    4. Accordion Icon<\/h3>\n\n\n\n

                    Use the Accordion Icon panel to customize the appearance, size, and position of the accordion icons.<\/p>\n\n\n\n

                      \n
                    • Color:<\/strong> Set the icon color.<\/li>\n\n\n\n
                    • Background:<\/strong> Set the icon background color or gradient.<\/li>\n\n\n\n
                    • Border:<\/strong> Customize the icon border.<\/li>\n\n\n\n
                    • Border Color:<\/strong> Set the icon border color for the Hover and Active states.<\/li>\n\n\n\n
                    • Vertical Position (px):<\/strong> Adjust the vertical position of the icon.<\/li>\n\n\n\n
                    • Icon Size (px):<\/strong> Set the icon size.<\/li>\n\n\n\n
                    • Box Size (px):<\/strong> Set the size of the icon container.<\/li>\n\n\n\n
                    • Border Radius:<\/strong> Customize the corner radius of the icon container.<\/li>\n<\/ul>\n\n\n\n

                      The icon styling controls include Normal, Hover, and Active<\/strong> states where applicable.<\/p>\n\n\n\n

                      \"\"<\/figure>\n\n\n\n

                      Advanced Tab<\/h2>\n\n\n\n

                      The Advanced tab provides additional spacing and background controls for the Accordion Block. These settings apply to the entire block, not to individual accordion items.<\/p>\n\n\n\n

                      1. Spacing<\/h3>\n\n\n\n
                        \n
                      • Padding:<\/strong> Set the inner spacing around the entire Accordion Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n
                      • Margin:<\/strong> Set the outer spacing around the entire Accordion Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n

                        Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                        Note:<\/strong> These spacing controls apply to the entire block and are separate from the item, question, and answer spacing options in the Style tab.<\/p>\n\n\n\n

                        2. Background<\/h3>\n\n\n\n
                          \n
                        • Background:<\/strong> Customize the background of the entire Accordion Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n

                          Note:<\/strong> This background applies to the block container, not to individual accordion items. To customize individual item backgrounds, use Style \u2192 Items<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

                          The Accordion Block lets you display questions and answers in collapsible sections. Visitors can click a question to expand its answer, making it easier to organize FAQs and other content in a compact layout. You can customize the questions, answers, icons, spacing, colors, typography, borders, and other styling options to match your website design. How […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16],"doc_tag":[],"class_list":["post-2037","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-10","word_count":1004,"total_views":"15","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2037"}],"version-history":[{"count":0,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2037\/revisions"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2037"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2037"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}