The top 5 .NET MAUI Accordion features 

[{"selector":"#anim-53a9fab9-1e34-46c9-98b8-0f782489f136","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-ab782fcd-5dfe-48e8-9ffe-1abf0b88e29c","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-9d742df0-14b9-4548-bf51-20c75148acad","keyframes":{"transform":["translate3d(-180.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-82c3b22c-2fc8-431c-99e0-9422e0e6b5da","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-610bb836-1a9b-437f-90ba-300833dd0994","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-567f9c6b-0a02-4cd0-9339-39d6c4cb0fc8","keyframes":{"transform":["translate3d(-164.44445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bb1b3a75-e639-4a38-a8cb-bb014063e866","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-033788e4-4635-46a9-b205-410b547866f1","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-d8ca7eb5-b067-472d-bb27-1bf3ec8cbb78","keyframes":{"transform":["translate3d(-180.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-87bd7b57-b8cd-4877-a6f0-72a571fc0520","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9c148e91-f210-4997-a29b-a3fec3d5408a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-d9de34c9-1be6-4f25-a6fc-24dabc32ac1e","keyframes":{"transform":["translate3d(-180.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4f4a5063-c8ff-4fc2-894d-dae25446268e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc5ad9df-8c79-4d86-ad99-0e488b0afd33","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-fdf7ab6e-ec72-4127-bcbe-d4fb29347b17","keyframes":{"transform":["translate3d(-160.10363%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce22070c-7f7b-48d1-bc0d-1c2e8fd0d61b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f00d6f3a-9020-4b95-a266-7bd1742e0cb1","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Data binding Expand and collapse Animation Item spacing Visual state manager

Data binding

[{"selector":"#anim-c7e4cf78-84a7-492e-9f67-f18a74f5f2f7","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-10e7cec6-1479-4cad-95c0-c7df9a95c2f2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8c5d26d3-8e80-451c-aa9e-7f9d3bf0b812","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-3c969a39-eeef-4540-b518-8793655b9a75","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e897b29b-43b7-44e4-a05d-285f79c72a30","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b695af29-2118-4a9b-a5f6-fcb8d0366865","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Accordion allows user to populate items by connecting a data source collection to a bindable layout.

Expand and collapse

[{"selector":"#anim-9d1d88ad-80ea-4150-9dad-89498435afd7","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cad6bb2a-b274-4f8a-8b6e-884c95199b2f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-44cd76cc-58ad-4af9-ae1f-ae7d978573cf","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b83e479c-d0ff-4dac-b15b-94dc2c682e3a","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-582ad829-ed1f-44b6-82bf-9d2c0d6f538d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63f896d7-efbf-434a-82d0-7be8baebfa8a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Users can expand and contract the Accordion both interactively and through programming.

Animation

[{"selector":"#anim-163bf124-7c2d-4535-955d-ffd1fad9c105","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aa5533ca-e7e9-4f3b-b6c4-93aba40ea217","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a26c7a5b-9d95-44a7-92e6-f432338c61a4","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-2c326705-886d-4231-972b-fb87a92a7b54","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fbbb3707-f6a0-4b8d-ac7e-44e2ede8df17","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-65f55c6e-1f26-4d39-aedb-4e99808b32b2","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Use customizable animations for expanding and collapsing items. Manage the animations by enabling or disabling them, adjusting their durations, and modifying their easing styles.

Item spacing

[{"selector":"#anim-c1963958-cd39-402f-b6ad-b1d268525b1e","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-57e5cb9f-8a4b-43bb-87d3-2f54016ef214","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-da91ffae-73fa-43ec-87dc-6acf383a4bea","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-61c8a309-59d6-4c52-83af-b79ef90ed603","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7441e3f5-7f27-4dce-ae19-3550fd977bd6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eb09cc9b-eca8-49d3-834e-57fdd90b68df","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Users can easily adjust the vertical spacing between items within the Accordion control.

Visual state manager

[{"selector":"#anim-4ba474a8-4654-4611-b69c-7fd7a33a4362","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37a99c41-370c-459f-9202-ef87f894763f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c2ece5fa-c2d9-4949-9500-10d3e506124d","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-60b45613-14d2-4eca-8d8a-d65dd23d072a","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc2bacb2-e26f-4fd1-8d08-1c53b802275b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7c3ee1f-0f58-4594-9555-cd734e8f6554","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Utilize the visual state manager to change the appearance of items easily based on their expanded or collapsed state.

Syncfusion .NET MAUI Accordion

[{"selector":"#anim-e9f3e85d-59f6-4f7d-b526-fc8557127300","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] The .NET MAUI Accordion is a container-based control with a vertically collapsible panel and stacked headers. It allows users to expand or collapse one or multiple panels at a time within the available space. No credit card required.