# \[Question\] Collapsing and Expanding views in perspective

**URL:** <https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829>\
**Category:** Ignition Early Access\
**Created:** [January 11, 2019, 7:10pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829 "2019-01-11T19:10:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattn1](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mattn1](https://forum.inductiveautomation.com/u/mattn1)\
**Post date:** [January 11, 2019, 7:10pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/1 "2019-01-11T19:10:13Z")

</div>

Here is the behavior I would like:

 ![rect815](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/17cd458a2bfa9de8c1a6d45a26ff53f5b736c82b.png)

I have been playing with perspective and haven’t figured out a view type to accomplish this yet. Is it possible with the current tool set? Any direction would be great.

---

<div class="post-metadata">

**Author:** ![Carl.Gould](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/carl.gould/32/7262_2.png) [@Carl.Gould](https://forum.inductiveautomation.com/u/Carl.Gould)\
**Post date:** [January 11, 2019, 7:42pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/2 "2019-01-11T19:42:22Z")

</div>

Hmm… I think this would probably be best done on our end as a new type of accordion component. Great idea, we’ll add this to our list.

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [February 27, 2019, 2:02am UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/3 "2019-02-27T02:02:16Z")

</div>

Could this component be flexible in how the different sections are expanded/collapsed? e.g. @mattn1 wants to be able to click on sections to expand or collapse them, but could you also have them automatically expand or collapse based on a tag/expression binding?

I can see this being very useful for e.g. collapsing manual speed controls when a motor is switched to auto and the manual controls no longer apply, or automatically expanding a “detailed drive information” section when a drive is faulted, but just showing a high-level summary when things are normal. Effectively, be able to set a view up to show only the most relevant things in a dynamic manner, but still have all the other information accessible if the user wants to look at it, without having to resort to a lot of complex x and y position bindings

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 27, 2019, 6:27pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/4 "2019-02-27T18:27:49Z")

</div>

While it’s a lot of work, you could get this working with the existing Flex container, as long as you stay away from the Tag binding (as it would affect users in other sessions as well).

Essentially, you would set the FlexContainer.props.direction to “column”, and then place a Button and an Embedded View for each View you want to have in the “accordion” into the Flex Container.

The Button would have an onCLick event which toggles the visibility of the Embedded View. The Embedded View must also have an Expression binding on the EmbeddedView.position.basis property a la `if({../<embedded_view_name>.meta.visible}, "<desired expanded_size>", "0px")`

---

<div class="post-metadata">

**Author:** ![mattn1](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mattn1](https://forum.inductiveautomation.com/u/mattn1)\
**Post date:** [April 30, 2019, 6:05pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/5 "2019-04-30T18:05:59Z")

</div>

Any way to do this and nest the views without getting scroll bars?

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 7, 2019, 10:27pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/6 "2019-05-07T22:27:18Z")

</div>

I haven’t actually tested it, but in the style information for your embedded views, set the overflowX and overflowY to Hidden. If I understand you correctly, I think that will have the effect you want.

---

<div class="post-metadata">

**Author:** ![Mahesh\_Madapathi](https://avatars.discourse-cdn.com/v4/letter/m/ce73a5/32.png) [@Mahesh\_Madapathi](https://forum.inductiveautomation.com/u/Mahesh_Madapathi)\
**Post date:** [May 19, 2020, 9:19pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/7 "2020-05-19T21:19:37Z")

</div>

Carl, Is this feature available at this time?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 19, 2020, 9:42pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/8 "2020-05-19T21:42:59Z")

</div>

Amusingly, the accordion component actually just became available in nightly builds...yesterday:

> [@\[New\] Accordion Component](http://forum.inductiveautomation.com/t/new-accordion-component/34847):
>
> The Accordion Component, available in the latest nightly and planned for 8.0.14, allows for the easy organization of embedded views in collapsible/expandable sections. Optionally, embedded views may also be used in place of static text as Headers for even more customization. Come check it out, we welcome your feedback!

---

<div class="post-metadata">

**Author:** ![Mahesh\_Madapathi](https://avatars.discourse-cdn.com/v4/letter/m/ce73a5/32.png) [@Mahesh\_Madapathi](https://forum.inductiveautomation.com/u/Mahesh_Madapathi)\
**Post date:** [May 19, 2020, 9:59pm UTC](https://forum.inductiveautomation.com/t/question-collapsing-and-expanding-views-in-perspective/21829/9 "2020-05-19T21:59:16Z")

</div>

Wonderful! Thanks @paul-griffith
