Accordian effect in a UITableView

Question

I want to expand a cell in my table view when I select it. Initially it should look like this:

And on expanding, it should give more detail like this:

This is how I'm creating the cell initially:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * MyIdentifier = @"MyIdentifier";
    UITableViewCell * cell = [self.table dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:MyIdentifier] autorelease];
        cell.textLabel.frame = CGRectMake(0, 0, cell.textLabel.frame.size.width, 
        cell.textLabel.frame.size.height);
 }
 id key = [[articles allKeys] objectAtIndex:indexPath.section];
 cell.textLabel.text =@"TitleTitleTitle";        
 cell.detailTextLabel.text=@"DeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatai";
 return cell;
}

Answer 1

I published a sample code at github

Your tabelView:cellForRowAtIndexPath: could look like this.

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * MyIdentifier = @"MyIdentifier";
    UITableViewCell * cell = [self.table dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:MyIdentifier] autorelease];
        cell.textLabel.frame = CGRectMake(0, 0, cell.textLabel.frame.size.width, 
                                          cell.textLabel.frame.size.height);
    }
    id key = [[articles allKeys] objectAtIndex:indexPath.section];
    cell.textLabel.text =@"TitleTitleTitle";        
    cell.detailTextLabel.text=@"DeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatailDeatai";


    //SEE MY NOTE BELOW
    if([indexPath isEqual:selectedIndexPath]){
        cell.textLabel.numberOfLines=0;
        cell.detailTextLabel.numberOfLines=0;

        CGSize constraintSize;
        constraintSize.width = cell.textLabel.frame.size.width;
        constraintSize.height = MAXFLOAT;
        cell.textLabel.frame = [cell.textLabel.text sizeWithFont:cell.textLabel.font constrainedToSize:constraintSize];

        constraintSize.width = cell.detailTextLabel.frame.size.width;
        constraintSize.height = MAXFLOAT;
        cell.detailTextLabel.frame = [cell.detailTextLabel.text sizeWithFont:cell.detailTextLabel.font constrainedToSize:constraintSize];
    } else {
        cell.textLabel.numberOfLines=1;
        cell.detailTextLabel.numberOfLines=1;
    }
    return cell;
}

BUT
You will also need the height of the cell by dynamic in tableView:heightForRowAtIndexPath:, so you should refactor the sizing parts into a helper methods, that writes the sizes of the 2 labels and the height of the cell to ivars, call the method from tableView:heightForRowAtIndexPath:, use the cell height there and the labels sizes in tabelView:cellForRowAtIndexPath: