Expand vs Collapse for each TableViewRow with dynamic content?

Hi All,

I want perform the expand and collapse for each tableviewrow when event listener calls

First time I want show the small content on the each TableViewRow of TableView. When I am click on any one of TableViewRow It will expand and shows full description. If I am click on expanded row it should collapse with showing small content.

I used below code, based on that I was unable expand and collapse each row. Here code:

var tableData = [];
for (var i = 0; i < 5; i++) {
    var taskDetailsRow = Ti.UI.createTableViewRow({
 
        layout : 'vertical',
        height : 75,
        click : 'no',
    });
 
    var descLabel = Titanium.UI.createLabel({
        text : "All my friends. Settle down let me talk, I will get more and more emotional (crowd gets louder and louder as he composes himself). My life, between 22 yards for 24 years, it is hard to believe that that wonderful journey has come to an end, but I would like to take this opportunity to thank people who have played an important role in my life.",
        textAlign : 'left',
        top : 6,
        left : 6,
        right : 20,
        color : "#000",
 
    });
 
    var descriptionView = Ti.UI.createView({
 
        backgroundColor : '#ee9d00',
 
    });
 
    descriptionView.add(descLabel);
 
    taskDetailsRow.add(descriptionView);
 
    //adding taskDetailsRow to array
    tableData.push(taskDetailsRow);
 
    taskDetailsRow.addEventListener('click', function(e) {
 
        Ti.API.info("taskDetailsRow event listerner is called " + e.row.click);
 
        if (e.row.click == 'yes') {
            e.row.setHeight(75);
            e.row.click = 'no';
        } else {
            e.row.setHeight(Ti.UI.SIZE);
            e.row.click = 'yes';
        }
 
    });
 
}
 
var tableView = Ti.UI.createTableView({
    data : tableData,
    height : Ti.UI.SIZE,
    //separatorColor : '#000'
});
 
$.taskProgressWin.add(tableView);
 
$.taskProgressWin.open();