How to create an Accordion with UItableview under a UItableview?

Question

I am working on app which requires a Facebook/Gmail iphone app type menu which i already have with the help of DDMenuController. But now i have requirement where one of the rows needs to show accordion on click with another tableview with 5 rows (all should be clickable and able to push new viewcontrollers). I have seen couple of code sample but nothing seems to fit my requirement, so just trying to put it out here hoping someone has a better solution.

Thanks,

5 seconds on Google brings up quite a few decent tutorials. Like [this](http://www.cocoanetics.com/2011/03/expandingcollapsing-tableview-sections/) one for example. Just try searching for Expanding or Collapsing tableviews. — SethHB, Mar 15 '13 at 22:01
You may take a look at this accordion example in Swift: https://github.com/tadija/AEAccordion It's got very little code to create accordion effect (not by using sections but cells), and as a bonus there is also a solution to use XIB files inside other XIB files (useful for custom cells which use custom views). — tadija, Jun 27 '15 at 02:44

anoop4real · Answer 1 · 2016-05-08T07:08:52.180

13

One of my work had a requirement to have an accordion view but having multiple levels of expansion and collapse of cells like you open/ close your directory structure.

I did a sample on that, I was able to achieve the desired result. The basic concept is the same, I am using the deleteRowsAtIndexPath and insertRowsAtIndex path only but by creating a model object which has a parent children relationship and loading the children into the main array whenever the parent is tapped. I am not good at putting a tutorial so I am sharing my sample code, hope it helps someone.

Code here Accordion_git

Updated Did a SWIFT version of this, not sure whether optimal but it works.

Code here Accordion_SWIFT

Accordion

edited May 08 '16 at 07:08

answered Nov 23 '13 at 16:45

anoop4real

7,598
4
53
56

3

what a bad choice for a sharing website.. – Rizon Oct 06 '14 at 13:21
2

@Rizon changed to git :) – anoop4real Oct 17 '14 at 11:56
1

Thanks! I implemented this control a few years ago using nested tableviews, but your approach makes way more sense. Cheers. – codrut Mar 02 '16 at 09:05

score 8 · Accepted Answer · answered Mar 15 '13 at 22:06

Better solution is Expand or Collapse TableView Sections

Good Tutorial is available here

You can download the sample code here

Sample Code

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    // Configure the cell...

    if ([self tableView:tableView canCollapseSection:indexPath.section])
    {
        if (!indexPath.row)
        {
            // first row
            cell.textLabel.text = @"Expandable"; // only top row showing

            if ([expandedSections containsIndex:indexPath.section])
            {
                cell.accessoryView = [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeUp];
            }
            else
            {
                cell.accessoryView = [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeDown];
            }
        }
        else
        {
            // all other rows
            cell.textLabel.text = @"Some Detail";
            cell.accessoryView = nil;
            cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        }
    }
    else
    {
        cell.accessoryView = nil;
        cell.textLabel.text = @"Normal Cell";

    }

    return cell;
}

- (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];

            }
        }
    }
}

this is not a expanding, its a damn alert lol – ChuckKelly Dec 01 '13 at 05:46 — ChuckKelly, Dec 01 '13 at 05:46

How to create an Accordion with UItableview under a UItableview?

2 Answers2

Linked