Increase scrollview's element height on clicking it

Question

I am new to famo.us like everybody else.
I cannot think of a way to increase the height of each item (probably surface) inside my scrollview on clicking that item.
Eg. like below list view below

---

item 1

---

item 2

---

item 3

---

Now Clicked item 2

---

item 1

---

item 2

details of item 2

---

item 3

---

Answer 1

Here is a way I was able to achieve clicking to adjust height. It gets a bit more complicated is you want to animate the size.

Here is the simple click example..

Hope it helps!

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var Scrollview      = require('famous/views/Scrollview');

var surfaces = [];

var scrollview = new Scrollview();

scrollview.sequenceFrom(surfaces);

for (var i = 0; i < 5; i++) {
  var surface = new Surface({
    size:[undefined,200],
    properties: {
      backgroundColor:'hsl('+(i*360/8)+',100%,50%)'
    }
  });

  surface.open = false;

  surface.on('click',function(){
    var size = this.open ? [undefined,200] : [undefined,400] ;
    this.setSize(size);
    this.open = !this.open;
  }.bind(surface));

  surfaces.push(surface);
  surface.pipe(scrollview);

};

context.add(scrollview);