{"product_id":"collapsible-content","title":"Collapsible Content","description":"\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003eAn accordion that opens into a real layout, not just a paragraph of text. Each dropdown can reveal up to three columns of images and text cards in any combination, so a single FAQ row can hold a product shot next to an answer, or three side-by-side detail cards. Perfect for brands with a lot to explain who want their FAQ, ingredient breakdown, or care guide to look as considered as the rest of the page.\u003c\/p\u003e\n\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003e\u003cstrong\u003eKey Features:\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul dir=\"auto\" class=\"[li_\u0026amp;]:mb-0 [li_\u0026amp;]:mt-1 [li_\u0026amp;]:gap-1 [\u0026amp;:not(:last-child)_ul]:pb-1 [\u0026amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\"\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eEach dropdown holds 1–3 columns, and every column independently switches between image and text — so one row can be image + text, the next three text cards, the next a single wide column, all inside the same section\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eText columns can take their own card background and text color, with the card stretching to match the tallest column in the row so an image and a text card always line up cleanly\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eSmooth open\/close animation done with CSS grid rather than JavaScript height measuring, so panels expand accurately no matter how much content is inside and never jump on resize — plus single-open behavior so opening one row closes the last\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eSwap the open and closed icons for any inline SVG (Lucide icons paste straight in) and set their color, or leave blank for the default caret\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003ePer-column typography with separate heading and body styles, size overrides, max-widths, and colors on all three columns, plus section-level control over the heading, intro, and dropdown labels and accent text styling on the main heading\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eWorks with Dawn color schemes or custom colors, with the dividers and icons following whichever you choose\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eLayout tuned to the pixel: optional dividers with adjustable thickness, row padding, content padding, card padding, column gap, image ratios per column (including \"adjust to image\"), corner radius, vertical alignment, and an optional full-width container\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003e\u003cstrong\u003ePerfect for:\u003c\/strong\u003e FAQs, ingredient and sourcing details, care and sizing guides, service breakdowns, shipping and returns info, or any long-form content you'd rather not stack down the page.\u003c\/p\u003e","brand":"Bungalow Creative","offers":[{"title":"Default Title","offer_id":47273452535977,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0602\/9538\/1161\/files\/CollapsibleContent.jpg?v=1784468093","url":"https:\/\/bungalowcreative.co\/products\/collapsible-content","provider":"Bungalow Creative","version":"1.0","type":"link"}