I recently had a need to replace a wpGridBuilder dropdown with an accordion. I do like the design of the dropdown, so I duplicated the look using a BricksExtras dropdown. If you are using BricksExtras, you should be able to copy this JSON and paste it into your site.
{"content":[{"id":"ehyrej","name":"xproaccordion","parent":"cabfiv","children":["rvmitg"],"settings":{"iconTransform":{"rotateX":"0deg"},"iconTransformActive":{"rotateX":"180deg"},"titlePadding":{"top":".75em","bottom":".75em","right":".5em","left":".5em"},"titleBackgroundColor":{"raw":"transparent"},"titleTypography":{"line-height":"1","font-weight":"700"},"_cssGlobalClasses":["vmmwqc"]}},{"id":"rvmitg","name":"block","parent":"ehyrej","children":["ygyxpi","yweqqt"],"settings":{"_hidden":{"_cssClasses":"x-accordion_item"}},"label":"Accordion Item"},{"id":"ygyxpi","name":"block","parent":"rvmitg","children":["kbzajq"],"settings":{"_hidden":{"_cssClasses":"x-accordion_heading-wrapper"},"_typography":{"font-size":"var(--text-s)","font-weight":"700"}},"label":"Heading tag"},{"id":"kbzajq","name":"block","parent":"ygyxpi","children":["vynomh","dimhxx"],"settings":{"_alignItems"<
/span>:"center","_direction":"row","_justifyContent":"space-between","_flexWrap":"nowrap","_hidden":{"_cssClasses":"x-accordion_header"},"_attributes":[{"name":"role","value":"button"},{"name":"tabindex","value":"0"}]},"label":"Accordion header","deletable":false},{"id":"vynomh","name":"text-basic","parent":"kbzajq","children":[],"settings":{"text":"Dropdown heading","tag":"span","_hidden":{"_cssClasses":"x-accordion_title"}}},{"id":"dimhxx","name":"icon","parent":"kbzajq","children":[],"settings":{"_hidden":{"_cssClasses":"x-accordion_icon"},"icon":{"icon":"ion-ios-arrow-down","library":"ionicons"},"iconSize":"16px"},"label":"Toggle icon"},{"id":"yweqqt","name":"block","parent":"rvmitg","children":["porcvw"],"settings":{"_hidden":{"_cssClasses":"x-accordion_content"},"_background":{"color":{"id":"acss_import_white-trans-70","name":"white-trans-70","raw":"var(--white-trans-70)"}},"_border":{"radius":{"left":"var(--radius-xs)","bottom":"var(--radius-xs)"}},"_boxShadow":{"color":{"raw":"rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 2px 2px 0px"}}},"label":"Content wrapper","deletable":false},{"id":"porcvw","name":"div","parent":"yweqqt","children":["rxtljh"],"settings":{"_hidden":{"_cssClasses":"x-accordion_content-inner"}},"label":"Content"},{"id":"rxtljh","name":"text-basic","parent":"porcvw","children":[],"settings":{"text":"Replace this with a filter or other content,","tag":"p"}}],"source":"bricksCopiedElements","sourceUrl":"https://bricks4wp.com","version":"1.9.8-beta","globalClasses":[{"id":"vmmwqc","name":"accordion-select","settings":{"iconTransform":{"rotateX":"0deg"},"iconTransformActive":{"rotateX":"180deg"},"titlePadding":{"top":".75em","bottom":".75em","right":".5em","left":".5em"},"titleBorder":{"radius":{"top"
:"4px","right":"4px","bottom":"4px","left":"4px"},"width":{"top":"1px","right":"1px","bottom":"1px","left":"1px"},"style":"solid","color":{"raw":"var(--neutral-trans-20)"}},"titleBackgroundColor":{"raw":"transparent"},"titleTypography":{"line-height":"1","font-weight":"700"},"_cssCustom":".accordion-select .x-accordion_icon{\n padding: 2px 5px 2px 12px;\n border-inline-start: 1px solid var(--neutral-trans-20);\n color:var(--neutral-trans-20);\n}"}}],"globalElements":[]}JSON


