# Smooth collapsible content

**URL:** <https://forums.fusetools.com/t/smooth-collapsible-content/6152>\
**Category:** How-to Discussions\
**Created:** [October 26, 2015, 12:30pm UTC](https://forums.fusetools.com/t/smooth-collapsible-content/6152 "2015-10-26T12:30:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Toofifty](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/toofifty/32/599_2.png) [@Toofifty](https://forums.fusetools.com/u/Toofifty)\
**Post date:** [October 26, 2015, 12:30pm UTC](https://forums.fusetools.com/t/smooth-collapsible-content/6152/1 "2015-10-26T12:30:16Z")

</div>

Hi, I’m currently using the Visibility attribute in UX to hide/show a piece of content underneath its image, which are all in a StackPanel that needs to accommodate for the collapsible content when it is set to visible. My question is; how can I do this smoothly? i.e. add a transition animation to slowly ease in the new content.

I’ve tried changing the height inside the toggle rather than visibility - this works well although the collapsible content can be varying heights, and if I don’t hard code the initial height it will stick to 0 after being toggled.

Any ideas?

Cheers

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 26, 2015, 12:39pm UTC](https://forums.fusetools.com/t/smooth-collapsible-content/6152/2 "2015-10-26T12:39:13Z")

</div>

Hi!

This is a good use case for `<LayoutAnimation>` - see these links:

[https://www.fusetools.com/learn/fuse#-layoutanimation-and-multilayoutpanel-](https://www.fusetools.com/learn/fuse#-layoutanimation-and-multilayoutpanel-)

[https://www.fusetools.com/community/examples/animatedlist](https://www.fusetools.com/community/examples/animatedlist)

---

<div class="post-metadata">

**Author:** ![Toofifty](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/toofifty/32/599_2.png) [@Toofifty](https://forums.fusetools.com/u/Toofifty)\
**Post date:** [October 26, 2015, 12:58pm UTC](https://forums.fusetools.com/t/smooth-collapsible-content/6152/3 "2015-10-26T12:58:06Z")

</div>

Thanks! Took me a few tries to get it into the right panel but it works very nicely. Next problem: the text in the new content is rendered on top of the next image while it plays the LayoutAnimation, is there a z-index or similar variable?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 26, 2015, 2:20pm UTC](https://forums.fusetools.com/t/smooth-collapsible-content/6152/4 "2015-10-26T14:20:09Z")

</div>

The Z-order is determined by the order in the UX file. Higher “up” in the UX-file, is higher “up” in the Z-order. Like layers in photoshop.