Accordion 1

This accordion uses the Webflow dropdown element to contain each item and the native dropdown open/close interaction to control the animation.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"1247a0b9-3f86-fa9a-9ca0-fe99ec00b29a","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e0"],"children":["58270f7d-06b6-02df-5cde-a408087fcd28","72689048-78b5-d28a-4705-e720d0cb5c41","140f37ff-cf1e-8a7f-c6ef-15033c13aad1","73ea6c32-01cd-c357-f09e-b86d203d6e62"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"58270f7d-06b6-02df-5cde-a408087fcd28","type":"DropdownWrapper","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"children":["02271c73-506e-2138-23af-4894834c3510","553a450a-9f95-70a4-b1b5-a7f86a8756cf"],"data":{"tag":"div","attr":{"data-delay":0,"data-hover":false,"id":""},"search":{"exclude":true},"dropdown":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"visibility":{"conditions":[true]}}},{"_id":"02271c73-506e-2138-23af-4894834c3510","type":"DropdownToggle","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e2"],"children":["629b0176-36a5-8cb0-f2bc-1c221a458f47","c7f48141-3946-8b58-2907-0eb3ea108410"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"toggle"}}},{"_id":"629b0176-36a5-8cb0-f2bc-1c221a458f47","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e3"],"children":["4ea1899f-1c48-1d49-8ff7-4e0c51a3ce20"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4ea1899f-1c48-1d49-8ff7-4e0c51a3ce20","text":true,"v":"How does this accordion work?"},{"_id":"c7f48141-3946-8b58-2907-0eb3ea108410","type":"HtmlEmbed","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"553a450a-9f95-70a4-b1b5-a7f86a8756cf","type":"DropdownList","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e5"],"children":["4cfa57c8-c350-b2f5-7b6a-31e17c010628"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[true]},"dropdown":{"type":"list"}}},{"_id":"4cfa57c8-c350-b2f5-7b6a-31e17c010628","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e6"],"children":["7438ade0-813c-40fa-c25e-141e6a70f042"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7438ade0-813c-40fa-c25e-141e6a70f042","type":"Paragraph","tag":"p","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e7"],"children":["5ca08282-1e80-fe02-4e11-80c7085ba286"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5ca08282-1e80-fe02-4e11-80c7085ba286","text":true,"v":"This accordion utilizes the pre-made dropdown Webflow element."},{"_id":"72689048-78b5-d28a-4705-e720d0cb5c41","type":"DropdownWrapper","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"children":["5b59505c-670e-f774-a41b-0a21ac097078","da8e78b6-bc53-4be9-078b-580a3460ee1f"],"data":{"tag":"div","attr":{"data-delay":0,"data-hover":false,"id":""},"search":{"exclude":true},"dropdown":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"visibility":{"conditions":[]}}},{"_id":"5b59505c-670e-f774-a41b-0a21ac097078","type":"DropdownToggle","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e2"],"children":["a6a5d711-a957-e1bc-f2af-f47712c7bb7c","d16005de-2920-cfe9-3a8a-ed32d66cf1b4"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"toggle"}}},{"_id":"a6a5d711-a957-e1bc-f2af-f47712c7bb7c","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e3"],"children":["add97310-5084-75a1-b36e-ab07f9dcfb29"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"add97310-5084-75a1-b36e-ab07f9dcfb29","text":true,"v":"What are the limitations?"},{"_id":"d16005de-2920-cfe9-3a8a-ed32d66cf1b4","type":"HtmlEmbed","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"da8e78b6-bc53-4be9-078b-580a3460ee1f","type":"DropdownList","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e5"],"children":["608dda09-4fe5-f153-a735-48cf5ea7a7b6"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"list"}}},{"_id":"608dda09-4fe5-f153-a735-48cf5ea7a7b6","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e6"],"children":["fb9bb81d-7bd8-ccd0-f332-dce3af2c808a","c8b0520f-db60-b65d-dd7c-7e336419c737"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"fb9bb81d-7bd8-ccd0-f332-dce3af2c808a","type":"Paragraph","tag":"p","classes":[],"children":["c3208b71-5278-ccba-eeed-12c4a6a6ac72","86f705fb-2f2b-c285-de50-77af30bc16ba","f7f5e0f6-c719-8d7f-de36-dd84e09652df","c120fd2c-f35b-830b-fee9-2651576e7b83","8aacc4c9-7a1d-84b5-a627-ace111c77847","3e2e2834-7ba1-7bc4-f022-858306a20bee","fc776cee-55d0-db09-1e7a-aa4af6cbb525","f868d532-160d-9b1d-f63d-f7f1320e313c","935fa490-8b69-349d-27de-908f663050d6"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c3208b71-5278-ccba-eeed-12c4a6a6ac72","text":true,"v":"The height of the "},{"_id":"86f705fb-2f2b-c285-de50-77af30bc16ba","type":"Strong","tag":"strong","classes":[],"children":["b1536628-5a85-06c1-4342-39e1bb3c95e5"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b1536628-5a85-06c1-4342-39e1bb3c95e5","text":true,"v":".accordion-1_toggle"},{"_id":"f7f5e0f6-c719-8d7f-de36-dd84e09652df","text":true,"v":" needs to be set and that height needs to be the same in the "},{"_id":"c120fd2c-f35b-830b-fee9-2651576e7b83","type":"Strong","tag":"strong","classes":[],"children":["8aad0049-6199-db99-c308-6e610f6ccb5f"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8aad0049-6199-db99-c308-6e610f6ccb5f","text":true,"v":".accordion-1_dropdown"},{"_id":"8aacc4c9-7a1d-84b5-a627-ace111c77847","text":true,"v":" interactions on open and close. You also "},{"_id":"3e2e2834-7ba1-7bc4-f022-858306a20bee","type":"Strong","tag":"strong","classes":[],"children":["eab2ed61-0d2f-b2af-998a-7dd81f34c919"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"eab2ed61-0d2f-b2af-998a-7dd81f34c919","text":true,"v":"must use px units"},{"_id":"fc776cee-55d0-db09-1e7a-aa4af6cbb525","text":true,"v":" for the height of "},{"_id":"f868d532-160d-9b1d-f63d-f7f1320e313c","type":"Strong","tag":"strong","classes":[],"children":["c5510f74-6141-8991-5832-c8ab7381e6ac"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c5510f74-6141-8991-5832-c8ab7381e6ac","text":true,"v":".accordion-1_toggle"},{"_id":"935fa490-8b69-349d-27de-908f663050d6","text":true,"v":"."},{"_id":"c8b0520f-db60-b65d-dd7c-7e336419c737","type":"Paragraph","tag":"p","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e7"],"children":["d2db3930-24ea-02bc-5fff-2812080374ca","fcbfe4f5-9e77-7c71-3671-8b8aa887a956","7e1082b3-e846-6b75-9376-c1d0e4a15ef6"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d2db3930-24ea-02bc-5fff-2812080374ca","text":true,"v":"If you have an accordion where the content in "},{"_id":"fcbfe4f5-9e77-7c71-3671-8b8aa887a956","type":"Strong","tag":"strong","classes":[],"children":["146d8533-9d22-fd03-b230-f35a54dfd3df"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"146d8533-9d22-fd03-b230-f35a54dfd3df","text":true,"v":".accordion-1_toggle"},{"_id":"7e1082b3-e846-6b75-9376-c1d0e4a15ef6","text":true,"v":" is going to be variable you might want to consider another option because of the fixed height requirements."},{"_id":"140f37ff-cf1e-8a7f-c6ef-15033c13aad1","type":"DropdownWrapper","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"children":["494df50b-1ced-1119-35c2-65dae34f59f2","915bcb9b-4b9a-4b41-aec3-647e0f3b2959"],"data":{"tag":"div","attr":{"data-delay":0,"data-hover":false,"id":""},"search":{"exclude":true},"dropdown":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"visibility":{"conditions":[]}}},{"_id":"494df50b-1ced-1119-35c2-65dae34f59f2","type":"DropdownToggle","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e2"],"children":["d2edf4b3-2024-c10e-012c-1a79951b9636","4f5ce5fa-a235-67bd-12bd-862118dac13a"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"toggle"}}},{"_id":"d2edf4b3-2024-c10e-012c-1a79951b9636","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e3"],"children":["2387656b-0dbe-d0d9-1dae-5be931f41ad6"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2387656b-0dbe-d0d9-1dae-5be931f41ad6","text":true,"v":"What can I use this for?"},{"_id":"4f5ce5fa-a235-67bd-12bd-862118dac13a","type":"HtmlEmbed","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"915bcb9b-4b9a-4b41-aec3-647e0f3b2959","type":"DropdownList","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e5"],"children":["72650d37-799d-b12a-d66f-384d4f0226bf"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"list"}}},{"_id":"72650d37-799d-b12a-d66f-384d4f0226bf","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e6"],"children":["1a3dad5c-0494-1592-81fa-bb880d5c6a5c"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1a3dad5c-0494-1592-81fa-bb880d5c6a5c","type":"Paragraph","tag":"p","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e7"],"children":["1e3317c3-12f0-368f-6bac-42fde7be0ac8"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1e3317c3-12f0-368f-6bac-42fde7be0ac8","text":true,"v":"These are popular in frequently asked questions and product/service feature sections."},{"_id":"73ea6c32-01cd-c357-f09e-b86d203d6e62","type":"DropdownWrapper","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"children":["6948f874-aac9-4fc2-b3ba-2569e45420c5","cfe09269-5193-0780-c151-a280eb4af786"],"data":{"tag":"div","attr":{"data-delay":0,"data-hover":false,"id":""},"search":{"exclude":true},"dropdown":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"visibility":{"conditions":[]}}},{"_id":"6948f874-aac9-4fc2-b3ba-2569e45420c5","type":"DropdownToggle","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e2"],"children":["94babe7e-5b05-afb5-97c8-d047257ced4a","93241f5c-d32d-6c12-f8d0-a9334e5033d4"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"toggle"}}},{"_id":"94babe7e-5b05-afb5-97c8-d047257ced4a","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e3"],"children":["882cc0d5-cdc3-a8ff-3558-564154efd27e"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"882cc0d5-cdc3-a8ff-3558-564154efd27e","text":true,"v":"What other options do I have?"},{"_id":"93241f5c-d32d-6c12-f8d0-a9334e5033d4","type":"HtmlEmbed","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M7 10L12 14L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"cfe09269-5193-0780-c151-a280eb4af786","type":"DropdownList","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e5"],"children":["d24588a5-2b8f-d382-db19-45f53ff87f52"],"data":{"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"dropdown":{"type":"list"}}},{"_id":"d24588a5-2b8f-d382-db19-45f53ff87f52","type":"Block","tag":"div","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e6"],"children":["aa01ea35-b265-4052-01c6-8230aece40e4"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"aa01ea35-b265-4052-01c6-8230aece40e4","type":"Paragraph","tag":"p","classes":["04570c8d-c279-6360-9ca9-54acf4dd74e7"],"children":["3a0bb6a3-fc32-92d5-79ab-3b1a1ce585c1"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3a0bb6a3-fc32-92d5-79ab-3b1a1ce585c1","text":true,"v":"We are working on building more accordions that can work in a variety of different scenarios."}],"styles":[{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e0","fake":false,"type":"class","name":"accordion-1","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-direction: column; grid-row-gap: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e1","fake":false,"type":"class","name":"accordion-1_dropdown","namespace":"","comb":"","styleLess":"overflow: hidden; max-width: 25rem; min-width: 15rem;","variants":{"medium":{"styleLess":"max-width: none; min-width: 100%;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e2","fake":false,"type":"class","name":"accordion-1_toggle","namespace":"","comb":"","styleLess":"display: flex; height: 60px; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; justify-content: space-between; align-items: center; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; background-color: #0c60f5; white-space: normal;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e3","fake":false,"type":"class","name":"accordion-1_toggle-text","namespace":"","comb":"","styleLess":"color: white; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e4","fake":false,"type":"class","name":"accordion-1_icon","namespace":"","comb":"","styleLess":"width: 1rem; height: 1rem; color: white;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e5","fake":false,"type":"class","name":"accordion-1_dropdown-content","namespace":"","comb":"","styleLess":"position: static; display: block; background-color: #f1f3f5;","variants":{"main_open":{"styleLess":"display: flex; align-items: flex-end;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e6","fake":false,"type":"class","name":"accordion-1_content","namespace":"","comb":"","styleLess":"padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"04570c8d-c279-6360-9ca9-54acf4dd74e7","fake":false,"type":"class","name":"margin-bottom-0","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-bottom: 0rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-2","interactionTypeId":"DROPDOWN_INTERACTION","eventIds":["e-3","e-4"],"target":"663e540cf4995d8c6a1910dd|58270f7d-06b6-02df-5cde-a408087fcd28","createdOn":1703251817277},{"id":"i-3","interactionTypeId":"DROPDOWN_INTERACTION","eventIds":["e-5","e-6"],"target":"663e540cf4995d8c6a1910dd|72689048-78b5-d28a-4705-e720d0cb5c41","createdOn":1703251817277},{"id":"i-4","interactionTypeId":"DROPDOWN_INTERACTION","eventIds":["e-7","e-8"],"target":"663e540cf4995d8c6a1910dd|140f37ff-cf1e-8a7f-c6ef-15033c13aad1","createdOn":1703251817277},{"id":"i-5","interactionTypeId":"DROPDOWN_INTERACTION","eventIds":["e-9","e-10"],"target":"663e540cf4995d8c6a1910dd|73ea6c32-01cd-c357-f09e-b86d203d6e62","createdOn":1703255948351}],"events":[{"id":"e-3","name":"","animationType":"preset","eventTypeId":"DROPDOWN_OPEN","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-3","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-148"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|58270f7d-06b6-02df-5cde-a408087fcd28","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|58270f7d-06b6-02df-5cde-a408087fcd28","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-4","name":"","animationType":"preset","eventTypeId":"DROPDOWN_CLOSE","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-4","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-147"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|58270f7d-06b6-02df-5cde-a408087fcd28","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|58270f7d-06b6-02df-5cde-a408087fcd28","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-5","name":"","animationType":"preset","eventTypeId":"DROPDOWN_OPEN","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-3","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-60"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|72689048-78b5-d28a-4705-e720d0cb5c41","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|72689048-78b5-d28a-4705-e720d0cb5c41","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-6","name":"","animationType":"preset","eventTypeId":"DROPDOWN_CLOSE","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-4","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-149"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|72689048-78b5-d28a-4705-e720d0cb5c41","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|72689048-78b5-d28a-4705-e720d0cb5c41","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-7","name":"","animationType":"preset","eventTypeId":"DROPDOWN_OPEN","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-3","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-62"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|140f37ff-cf1e-8a7f-c6ef-15033c13aad1","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|140f37ff-cf1e-8a7f-c6ef-15033c13aad1","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-8","name":"","animationType":"preset","eventTypeId":"DROPDOWN_CLOSE","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-4","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-61"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|140f37ff-cf1e-8a7f-c6ef-15033c13aad1","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|140f37ff-cf1e-8a7f-c6ef-15033c13aad1","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703251817277},{"id":"e-9","name":"","animationType":"preset","eventTypeId":"DROPDOWN_OPEN","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-3","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-154"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|73ea6c32-01cd-c357-f09e-b86d203d6e62","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|73ea6c32-01cd-c357-f09e-b86d203d6e62","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703255948351},{"id":"e-10","name":"","animationType":"preset","eventTypeId":"DROPDOWN_CLOSE","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-4","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-63"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e540cf4995d8c6a1910dd|73ea6c32-01cd-c357-f09e-b86d203d6e62","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e540cf4995d8c6a1910dd|73ea6c32-01cd-c357-f09e-b86d203d6e62","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1703255948351}],"actionLists":[{"id":"a-3","title":"Accordion Basic OPEN","actionItemGroups":[{"actionItems":[{"id":"a-3-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af3a1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-3-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af39d","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":60,"widthUnit":"%","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-3-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af3a1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-180,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-3-n-4","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af39d","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"widthUnit":"%","heightUnit":"AUTO","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1700848144120},{"id":"a-4","title":"Accordion Basic CLOSE","actionItemGroups":[{"actionItems":[{"id":"a-4-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af3a1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e4"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-4-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"65d516f77facba4602705549|eb98e955-31cc-b230-1821-f394fe5af39d","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["04570c8d-c279-6360-9ca9-54acf4dd74e1"],"useEventTarget":"PARENT","boundaryMode":false},"widthValue":100,"heightValue":60,"widthUnit":"%","heightUnit":"px","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1700848436766}]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media