{"id":20761,"date":"2026-07-27T11:37:15","date_gmt":"2026-07-27T11:37:15","guid":{"rendered":"https:\/\/bricksfly.com\/?post_type=docs&p=20761"},"modified":"2026-07-27T11:53:46","modified_gmt":"2026-07-27T11:53:46","slug":"how-to-add-image-accordion-using-bricksfly","status":"publish","type":"docs","link":"https:\/\/bricksfly.com\/docs\/advanced-widgets\/how-to-add-image-accordion-using-bricksfly\/","title":{"rendered":"How to Add Image Accordion in Bricks Builder using BricksFly"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Image Accordion Element allows you to display images and content in an interactive accordion layout. You can customize each item with its own image, title, content, and link, while adjusting the layout, responsive behavior, alignment, and expansion settings to match your website design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirement&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bricks Theme\u00a0<\/strong><\/li>\n\n\n\n<li><strong>BricksFly Pro<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1919\" height=\"812\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme.webp\" alt=\"Add bricks theme\" class=\"wp-image-20720\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme.webp 1919w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-300x127.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1024x433.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-768x325.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1536x650.webp 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:42px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1919\" height=\"732\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro.webp\" alt=\"Adding bricksfly pro\" class=\"wp-image-20721\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro.webp 1919w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-300x114.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1024x391.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-768x293.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1536x586.webp 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Activate Image Accordion\u00a0In BricksFly<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your\u00a0<strong>WordPress Dashboard.\u00a0<\/strong><\/li>\n\n\n\n<li>Click on\u00a0<strong>BricksFly.\u00a0<\/strong><\/li>\n\n\n\n<li>Head to the\u00a0<strong>Elements.\u00a0<\/strong><\/li>\n\n\n\n<li>Under\u00a0<strong>Advanced,<\/strong>\u00a0toggle on\u00a0<strong><strong>Image Accordion<\/strong><\/strong>. <\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1893\" height=\"821\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion-.webp\" alt=\"Activate image accordion\" class=\"wp-image-20763\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion-.webp 1893w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion--300x130.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion--1024x444.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion--768x333.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-Image-Accordion--1536x666.webp 1536w\" sizes=\"(max-width: 1893px) 100vw, 1893px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Configure Accordion Items<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Items:<\/strong> Allows you to add, remove, duplicate, reorder, and manage the individual items displayed in the Image Accordion. Each item can contain its own image, title, content, and link. In this example, three items are added, but you can add as many items as needed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1904\" height=\"903\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added.webp\" alt=\"Three items are added\" class=\"wp-image-20766\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added.webp 1904w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added-300x142.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added-1024x486.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added-768x364.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added-1536x728.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Three-items-are-added-844x400.webp 844w\" sizes=\"(max-width: 1904px) 100vw, 1904px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Image Size:<\/strong> Selects the image resolution used for the accordion items, such as thumbnail, medium, large, or full size. In this example, <strong>Full Size<\/strong> is selected. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"399\" height=\"898\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Configure-Accordion-items.webp\" alt=\"Configure accordion items\" class=\"wp-image-20764\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Configure-Accordion-items.webp 399w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Configure-Accordion-items-133x300.webp 133w\" sizes=\"(max-width: 399px) 100vw, 399px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Adjust the Accordion Settings<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title HTML Tag:<\/strong> Selects the HTML tag used for the item titles, such as H2, H3, H4, or another available tag. Choose the tag according to your page heading structure. In this example, the title HTML tag is set to H4. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Layout:<\/strong> Controls how the accordion items are arranged, such as horizontally or vertically. In this example, <strong>Horizontally<\/strong> is selected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Stack Below (px):<\/strong> Sets the screen width below which the accordion items change to a stacked layout. This helps the element display properly on tablets and mobile devices. In this example, <strong>Stack Below<\/strong> is set to 768 by default, but you can enter any value as needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Expand On:<\/strong> Determines which interaction expands an accordion item, such as hovering over it or clicking it. For this example, <strong>Hover<\/strong> is selected. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Default Open Item:<\/strong> Selects which accordion item remains expanded when the page first loads. In this example, the value is set to 1, but you can enter any value as needed.<\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-background-color has-background wp-block-paragraph\"><strong>Note: In this example, the remaining settings are left unchanged at their default values. However, you can adjust them to match your design preferences or website requirements.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Height:<\/strong> Controls the overall height of the Image Accordion Element. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Horizontal Align:<\/strong> Controls the horizontal position of the item content, such as left, center, or right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vertical Align:<\/strong> Controls the vertical position of the item content, such as top, center, or bottom.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text Align:<\/strong> Controls the alignment of the text within each accordion item, such as left, center, or right.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"899\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adjust-the-Accordion-Settings-1.webp\" alt=\"Adjust the accordion settings \" class=\"wp-image-20768\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adjust-the-Accordion-Settings-1.webp 400w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adjust-the-Accordion-Settings-1-133x300.webp 133w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Configure the Button<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Link Type:<\/strong> Determines how the link is applied within the accordion item, such as through a button or the entire item. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Button Text:<\/strong> Sets the text displayed on the button, such as <strong>Learn More<\/strong>, <strong>View Project<\/strong>, or <strong>Explore Now<\/strong>. However, in this example, no button text is added.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"399\" height=\"851\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Customize-button-settings.webp\" alt=\"Customize button settings\" class=\"wp-image-20771\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Customize-button-settings.webp 399w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Customize-button-settings-141x300.webp 141w\" sizes=\"(max-width: 399px) 100vw, 399px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Result <\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay controls muted src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Final-Output-of-Image-Accordion.mp4\" playsinline><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Image Accordion Element allows you to display images and content in an interactive accordion layout. You can customize each item with its own image, title, content, and link, while adjusting the layout, responsive behavior, alignment, and expansion settings to match your website design. Requirement&nbsp; Make sure you have installed: Activate Image Accordion\u00a0In BricksFly Step 1: [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":19718,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-20761","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/0f038df3bc60da556be64d3ba44b6ffdd6d13c4b411e58e68fbd35029c0b0b00?s=96&d=mm&r=g","author_name":"Elias","_links":{"self":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/comments?post=20761"}],"version-history":[{"count":6,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20761\/revisions"}],"predecessor-version":[{"id":20775,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20761\/revisions\/20775"}],"up":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19718"}],"wp:attachment":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/media?parent=20761"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=20761"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=20761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}