# Toggle animation between 0% and 100% Height

**URL:** <https://forums.fusetools.com/t/toggle-animation-between-0-and-100-height/5834>\
**Category:** How-to Discussions\
**Created:** [May 10, 2017, 4:21pm UTC](https://forums.fusetools.com/t/toggle-animation-between-0-and-100-height/5834 "2017-05-10T16:21:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [May 10, 2017, 4:21pm UTC](https://forums.fusetools.com/t/toggle-animation-between-0-and-100-height/5834/1 "2017-05-10T16:21:56Z")

</div>

Hi! In my app I have an structure like this:

```auto
<App>
	<StackPanel>
		<Clicked>
			<Toggle Target="TriggerContent" />
		</Clicked>

		<Text>Header</Text>
		<StackPanel ux:Name="Content" ClipToBounds="true" Height="0">
			<WhileTrue ux:Name="TriggerContent">
				<Change Content.Height="100%" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
			</WhileTrue>

			<Text>Content 1</Text>
			<Text>Content 2</Text>
			<Text>Content 3</Text>
			<Text>Content 4</Text>
			<Text>Content 5</Text>
			<Text>Content 6</Text>
			<Text>Content 7</Text>
			<Text>Content 8</Text>
		</StackPanel>
	</StackPanel>
</App>

```

The problem is in my app the Content is dynamic and each element have different `Height`, so I don’t know the exact Height in pixels.  
In this example if I toggle the animation only shows 5 `Text` elements of the 8.

How can I solve this? To toggle and animate between 0% and 100% `Height` of any element (Show and Collapse with animation)?

Thanks!

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 11, 2017, 10:34pm UTC](https://forums.fusetools.com/t/toggle-animation-between-0-and-100-height/5834/2 "2017-05-11T22:34:45Z")

</div>

Hi Cristian,

the main challenge in your snippet is that you’re tying to set something to a 100% height of _undefined_. Well, that is still going to be _undefined_, no matter how hard you try.

A vertical `StackPanel` does not have a set height and can not have one, because it’s meant to accommodate vertically as much items as necessary. So you can’t do it that way.

What you can do is the opposite - you can set the height of the content as high as it needs to be. Here’s a snippet of one approach you could take. Note how it makes use of the `LayoutRole` property coupled with a `LayoutAnimation`, effectively making a neat structure that interacts with itself and by pushing neighbouring elements up and down.

```auto
<App>
	<StackPanel>
		<ExpandableThings HeaderText="First Header" Things="8" />
		<ExpandableThings HeaderText="Second Header" Things="5" />
		<ExpandableThings HeaderText="Third Header" Things="12" />
		<ExpandableThings HeaderText="Fourth Header" Things="3" />
	</StackPanel>

	<StackPanel ux:Class="ExpandableThings" ClipToBounds="true">
		<string ux:Property="HeaderText" />
		<int ux:Property="Things" />

		<LayoutAnimation>
			<Resize Vector="1" RelativeTo="SizeChange" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
			<Move Vector="1" RelativeTo="PositionChange" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
		</LayoutAnimation>

		<WhileTrue ux:Name="showContent">
			<Change theThings.LayoutRole="Standard" />
		</WhileTrue>
		<Clicked>
			<Toggle Target="showContent" />
		</Clicked>

		<Text Value="{ReadProperty HeaderText}" Alignment="Center" Color="#000c" />
		<Panel>
			<StackPanel ux:Name="theThings" LayoutRole="Inert">
				<Each Count="{ReadProperty Things}">
					<Text>Some Content</Text>
				</Each>
			</StackPanel>
		</Panel>
	</StackPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [May 12, 2017, 11:59am UTC](https://forums.fusetools.com/t/toggle-animation-between-0-and-100-height/5834/3 "2017-05-12T11:59:01Z")

</div>

Thanks!!!