{"id":238,"date":"2017-03-27T06:55:03","date_gmt":"2017-03-27T13:55:03","guid":{"rendered":""},"modified":"2025-06-11T08:15:07","modified_gmt":"2025-06-11T15:15:07","slug":"ux-patterns-expander-control-with-expand-collapse-animation","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-expander-control-with-expand-collapse-animation\/","title":{"rendered":"UX Patterns: Expander Control (with expand\/collapse animation)"},"content":{"rendered":"<p>In this blog post, we will create an expander control. An expander control can be useful to show and hide sections of your UI and therefore declutter your app. We will start with a simple expander that show\/hide content and we will finish by adding a expand\/collapse animation (linear but in theory, we should be able to add easing In\/out).<\/p>\n<p>I&#8217;ve laid this out in easy to follow screen shots below so you can easily replicate this idea in your own PowerApp!<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\"><img loading=\"lazy\" decoding=\"async\" alt=\"expander\" height=\"705\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\" style=\"display: inline\" title=\"expander\" width=\"397\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Let\u2019s start by laying out the UI elements needed for the expander control<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/eb828e47-05eb-41e2-a687-dd9145f05228.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"SNAGHTML120fc68\" border=\"0\" height=\"672\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/eb828e47-05eb-41e2-a687-dd9145f05228.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"SNAGHTML120fc68\" width=\"822\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>We arrange the above elements to create the expander below. We wire up the expand\/collapse buttons bellow as follow:<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/9e4cca98-a1d3-411d-b54e-15bb5af2e153.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"667\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/9e4cca98-a1d3-411d-b54e-15bb5af2e153.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"1013\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/6ecccd21-d36e-4888-b7ce-3c036e076c62.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"893\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/6ecccd21-d36e-4888-b7ce-3c036e076c62.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"1363\"\/><\/a><\/p>\n<p>In the above steps, we are toggling the value to expandCollapse between false and true on the OnSelect event. We are also using that variable to show and hide the appropriate collapse button depending on the state of the expander.<\/p>\n<p>\u00a0<\/p>\n<p>We use the same variable expandCollapse to determine if the height of the expander content is set to 0 or 300 in this case. That was makes this expander collapse and expand.<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/44af67df-5e71-47e2-8293-e22cbcb42392.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"592\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/44af67df-5e71-47e2-8293-e22cbcb42392.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"1352\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<h2>Animation<\/h2>\n<p>\u00a0<\/p>\n<p>To add animation, we simply tweak the height formula above.\u00a0 First, we will insert a Timer and set the following properties as follow:<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ef136ee7-a6ff-45d4-8684-ba4cb8660e92.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"583\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ef136ee7-a6ff-45d4-8684-ba4cb8660e92.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"551\"\/><\/a><\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/55ece355-58de-499b-a361-3212adf2af93.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"64\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/55ece355-58de-499b-a361-3212adf2af93.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"545\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Now we change the height formula :<\/p>\n<p>If(<strong>expandCollapse<\/strong>,300*(AnimationTimer.Value\/AnimationTimer.Duration),300*(1-(AnimationTimer.Value\/AnimationTimer.Duration)))<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ec971d78-0bb8-44e2-982d-2686b733da7c.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"image\" border=\"0\" height=\"783\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/ec971d78-0bb8-44e2-982d-2686b733da7c.png\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" title=\"image\" width=\"1552\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>As a bonus, you can build an accordion control (Hint: Expander+Variable height gallery = Accordion Control)<\/p>\n<p>\u00a0<\/p>\n<p><a href=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/59fabca5-7795-4b3f-9c66-fe9858f86149.gif\"><img loading=\"lazy\" decoding=\"async\" alt=\"accordion\" height=\"502\" src=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/59fabca5-7795-4b3f-9c66-fe9858f86149.gif\" style=\"display: inline\" title=\"accordion\" width=\"285\"\/><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Check out the sample app <a href=\"https:\/\/1drv.ms\/u\/s!AkoIyjgiwFpYgv1DFC7X0poCoSnJZQ\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post, we will create an expander control. An expander control can be useful to show and hide sections of your UI and therefore declutter your app.<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[3423],"job-role":[],"product":[3473],"property":[],"topic":[],"coauthors":[2051],"class_list":["post-238","post","type-post","status-publish","format-standard","hentry","audience-it-professional","content-type-tips-and-guides","product-power-apps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog post, we will create an expander control. An expander control can be useful to show and hide sections of your UI and therefore declutter your app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-expander-control-with-expand-collapse-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-27T13:55:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:15:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\" \/>\n<meta name=\"author\" content=\"Mehdi Slaoui Andaloussi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehdi Slaoui Andaloussi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\"},\"author\":[{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/\",\"@type\":\"Person\",\"@name\":\"Mehdi Slaoui Andaloussi\"}],\"headline\":\"UX Patterns: Expander Control (with expand\/collapse animation)\",\"datePublished\":\"2017-03-27T13:55:03+00:00\",\"dateModified\":\"2025-06-11T15:15:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\"},\"wordCount\":261,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\",\"keywords\":[\"Building UI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\",\"name\":\"UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\",\"datePublished\":\"2017-03-27T13:55:03+00:00\",\"dateModified\":\"2025-06-11T15:15:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage\",\"url\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\",\"contentUrl\":\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Patterns: Expander Control (with expand\/collapse animation)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9\",\"name\":\"Mehdi Slaoui Andaloussi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"caption\":\"Mehdi Slaoui Andaloussi\"},\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/","og_locale":"en_US","og_type":"article","og_title":"UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog","og_description":"In this blog post, we will create an expander control. An expander control can be useful to show and hide sections of your UI and therefore declutter your app.","og_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/ux-patterns-expander-control-with-expand-collapse-animation\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2017-03-27T13:55:03+00:00","article_modified_time":"2025-06-11T15:15:07+00:00","og_image":[{"url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif","type":"","width":"","height":""}],"author":"Mehdi Slaoui Andaloussi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehdi Slaoui Andaloussi","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#article","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/"},"author":[{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/","@type":"Person","@name":"Mehdi Slaoui Andaloussi"}],"headline":"UX Patterns: Expander Control (with expand\/collapse animation)","datePublished":"2017-03-27T13:55:03+00:00","dateModified":"2025-06-11T15:15:07+00:00","mainEntityOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/"},"wordCount":261,"commentCount":0,"publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif","keywords":["Building UI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/","name":"UX Patterns: Expander Control (with expand\/collapse animation) - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif","datePublished":"2017-03-27T13:55:03+00:00","dateModified":"2025-06-11T15:15:07+00:00","breadcrumb":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#primaryimage","url":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif","contentUrl":"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/b5dd5198-2f1c-44b9-a3b8-8cf8e0589885.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/27\/ux-patterns-expander-control-with-expand-collapse-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Patterns: Expander Control (with expand\/collapse animation)"}]},{"@type":"WebSite","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9","name":"Mehdi Slaoui Andaloussi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5","url":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","caption":"Mehdi Slaoui Andaloussi"},"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/mehdis\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":1,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":131318,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/238\/revisions\/131318"}],"wp:attachment":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=238"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=238"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=238"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=238"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=238"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=238"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}