# How to expand height of Scrollview item with animation, if possible.

**URL:** <https://forums.fusetools.com/t/how-to-expand-height-of-scrollview-item-with-animation-if-possible/3994>\
**Category:** How-to Discussions\
**Created:** [January 26, 2016, 7:46pm UTC](https://forums.fusetools.com/t/how-to-expand-height-of-scrollview-item-with-animation-if-possible/3994 "2016-01-26T19:46:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalfels](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kalfels/32/413_2.png) [@kalfels](https://forums.fusetools.com/u/kalfels)\
**Post date:** [January 26, 2016, 7:46pm UTC](https://forums.fusetools.com/t/how-to-expand-height-of-scrollview-item-with-animation-if-possible/3994/1 "2016-01-26T19:46:43Z")

</div>

Hi, I’m starting to code in fuse.  
I’d like to expand the height value of Panel item of scrollview when this item receive a click event.  
How can I do this?

```auto
 <App Theme="Basic">
    <StackPanel Orientation="Vertical">
        <Text Alignment="TopCenter">TEST</Text>
        <ScrollView>
            <StackPanel Alignment="Top">
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #1</Text>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CC0">
                    <Text Alignment="Center">CLICK ME #2</Text>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #3</Text>
                </Panel>
            </StackPanel>
        </ScrollView>
    </StackPanel>
 </App>

```

Example  
[![image01](http://s13.postimg.org/bj95z8m1z/image01.png)](http://postimage.org/)  
  
#2 state after receive a click event

[![image02](http://s13.postimg.org/njulzytgn/image02.png)](http://postimage.org/)

Really thankful

Luis Fernando Kalfels

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 27, 2016, 12:34pm UTC](https://forums.fusetools.com/t/how-to-expand-height-of-scrollview-item-with-animation-if-possible/3994/2 "2016-01-27T12:34:12Z")

</div>

Hey!

Here is an example of how you can do it (click the yellow item):

```auto
<App Theme="Basic">
    <StackPanel Orientation="Vertical">
        <Text Alignment="TopCenter">TEST</Text>
        <ScrollView>
            <StackPanel Alignment="Top">
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #1</Text>
                </Panel>
                <Panel ux:Name="p2" Width="100%" Height="100" Background="#CC0">
                    <Text Alignment="Center">CLICK ME #2</Text>
                    <WhileTrue ux:Name="expandp2">
                        <Change p2.Height="200" Duration="0.5" Easing="CircularInOut"/>
                    </WhileTrue>
                    <Clicked>
                        <Toggle Target="expandp2" />
                    </Clicked>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #3</Text>
                </Panel>
            </StackPanel>
        </ScrollView>
    </StackPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![kalfels](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kalfels/32/413_2.png) [@kalfels](https://forums.fusetools.com/u/kalfels)\
**Post date:** [January 28, 2016, 5:56pm UTC](https://forums.fusetools.com/t/how-to-expand-height-of-scrollview-item-with-animation-if-possible/3994/3 "2016-01-28T17:56:31Z")

</div>

Thanks Kristian 🙂