How to collapse tableview in appcelerator
<p>I want to insert in my appcelerator application an Expandable TableView. So I have find this code:</p>

<pre><code>var FoodBank = [];


function Food(head, backgroundColor, parentIndex, expand, childs){//Food object
    this.title =                 head;
    this.backgroundColor =         backgroundColor;
    this.parentIndex =             parentIndex;
    this.expand =                 expand;
    this.childs =                 childs;
    this.rightImage =             "/images/rowArrowRight.png";
}

function EmptyRow(){//EmptyRow object
    this.backgroundColor = "green";//change this to transparent to make the rows invisible
    this.selectedBackgroundColor = "transparent";
    this.ignore = true;
}

var fruit = new Food("Fruit", "transparent", 0, true, [
    {name:"Apple"},
    {name:"Mango",},
    {name:"Banana"},
    {name:"Orange"}]
);

var vegetable = new Food("Vegetable", "transparent", 1, true, [
    {name:"Carrot"},
    {name:"Potatoe"},
    {name:"Bringal"},
    {name:"Cabbage"}]
);

FoodBank.push(fruit);
FoodBank.push(vegetable);

for(var i = 0; i &lt;= 4; i++)//add EmptyRow objects to the FoodBank. It needs 5 EmptyRow objects to escape the ugly animation which you get with too few tableViewRows
    FoodBank.push(new EmptyRow());//this also bypasses the no row found error

var table = Ti.UI.createTableView({
  data:                    FoodBank,
  height:                 Ti.UI.FILL,
  layout:                 "vertical",
  separatorColor:         "transparent",
  backgroundColor:        "transparent"
});  

 /**
  * Event listener on table which handles the expanding/ collapsing of the childs. 
  * Parsing to int because the event callback is String. Int is needed to define next row index in insertRowAfter(); 
  * Also handles child clicks.
  */
table.addEventListener("click", function(e){
    if(e.rowData.ignore){//empty row click
        console.log("Ignored");  
        return;//do nothing
    }
    var index = parseInt(e.index);//e callback is String, parse to int        
    var tableItem = e.rowData;//get table data    
    var parentIndex = parseInt(tableItem.parentIndex);//get parent index and parse to int
    if(!parentIndex &amp;&amp; index &gt; 0){//clicked child
        console.log("You've clicked child " + index);
        return;
    }
    if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click       
        tableItem.rightImage = "/images/rowArrowDown.png";
        for(var i in tableItem.childs){//loop through childs
            var child = tableItem.childs[i];//fetch child
            var row = Ti.UI.createTableViewRow({
                layout:             "vertical",
                height:             44,
                backgroundColor:     "pink"
            });
            var label = Ti.UI.createLabel({
                text:                 child.name,//set name
                height:                Ti.UI.SIZE,
                color:                "red",
                font:                 {
                                        fontWeight:"bold",
                                    }
            });             
            row.add(label);       
            table.insertRowAfter(parseInt(i) + index, row);
        }        
        console.log("Expanded parent " + index);
    }else if(!tableItem.expand){//if expand is false collapse the elements
        tableItem.expand = true;//will expand on next click
        tableItem.rightImage = "/images/rowArrowRight.png";
        for(var i in tableItem.childs)//loop through childs
            table.deleteRow(index + 1);   
        console.log("Collapsed parent " + index);     
    }
}); 

$.container.add(table);
</code></pre>

<p>If I try to run my application, I can see two row and if I try to click on one of these, I can see the child of this row, and this is ok. But if I try to re-click on parent row, the child are not deleted but the code insert othere child and this is not correct.</p>

<p>I have do a debug and in this row:</p>

<pre><code>if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click   
</code></pre>

<p>after that are execute, the value of expand = false, but if I try to click on this row, the value of tableItem.expand is true. So for this, the row is not may collapsed but every time are expanded</p>