Expand UITableView cell in UITableViewstylePlain

Question

I want to expand tableview cell on it's click. There is a tableview in which two cells are expandable and others are not. I need when i click on expandable cell it should show cells under it and on clicking again it should hide. There is a image below defining this.

How can i achieve this functionality, please guide for the above. Thanks in advance.

Answer 1

Here is the complete Tutorial with Expandable UITableView

Here’s the code snip for that.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([self tableView:tableView canCollapseSection:indexPath.section])
    {
        if (!indexPath.row)
        {
            // only first row toggles exapand/collapse
            [tableView deselectRowAtIndexPath:indexPath animated:YES];

            NSInteger section = indexPath.section;
            BOOL currentlyExpanded = [expandedSections containsIndex:section];
            NSInteger rows;

            NSMutableArray *tmpArray = [NSMutableArray array];

            if (currentlyExpanded)
            {
                rows = [self tableView:tableView numberOfRowsInSection:section];
                [expandedSections removeIndex:section];

            }
            else
            {
                [expandedSections addIndex:section];
                rows = [self tableView:tableView numberOfRowsInSection:section];
            }

            for (int i=1; i<rows; i++)
            {
                NSIndexPath *tmpIndexPath = [NSIndexPath indexPathForRow:i 
                                                               inSection:section];
                [tmpArray addObject:tmpIndexPath];
            }

            UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

            if (currentlyExpanded)
            {
                [tableView deleteRowsAtIndexPaths:tmpArray 
                                 withRowAnimation:UITableViewRowAnimationTop];

                cell.accessoryView = [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeDown];

            }
            else
            {
                [tableView insertRowsAtIndexPaths:tmpArray 
                                 withRowAnimation:UITableViewRowAnimationTop];
                cell.accessoryView =  [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeUp];

            }
        }
    }
}

as shown below picture

This and this one solution also help you to understand how to manage Expandable TableView

Answer 2

Okay, what I'm thinking is, The titles, Events, Overhead and Friends would be the custom UIView with UIImageView for background, UILabel for title, and UIButton for expand. So basically

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

having return count of the titles you've.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

having return UIView for each titles.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

having count of the rows within that title. You may need to maintain an array for this.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

having height of the cell item

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

initially it should be 0 (zero) for all sections, when user tap on expand, it should be increase with respect to number of rows * cell height within that section.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

You may need some good logic for setting all rows for expansion

Your expansion buttons actions something like,

- (void) expandSection:(UIButton *)sender;

that you can identify which section to be expand using sender.tag, so don't forget to add tag properly. You may need an int in .h file for store the current section, and can be use in - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section datasource method.