Drop-Down List in UITableView in iOS

Question

How to Create this type of tableview in iOS??

Here, If we tap on 1st row 'Account', then automatically it scrolled with some more rows which is showing in Image. And if again we tap on Account, then that view will be hidden.

Answer 1

You could have Account as a cell that expands on tap to reveal three buttons ("Profile", "Activate Account", "Change Password"), but that creates a problem: tapping around each of the three buttons will count as "user selected the Account cell" and trigger -tableView:didSelectRowAtIndexPath: with the resulting expand/collapse of the cell.

Or you could make each of the hidden options ("Profile", "Activate Account", "Change Password") a separate table view cell. But I don't know how you could animate the three cells as a whole expanding and contracting (instead of each expanding separately from zero height to fully expanded).

So, perhaps the best solution is to:

1. Have the even cells (indices: 0, 2, 4...) to fulfil both the role of "Menu title" and "Toggle menu open/close" (towards the associated odd cells described below).
2. Interleave the (initially collapsed) "menu body" cells, each with one button per option (e.g. "Profile", "Activate Account", "Change Password"), laid out vertically, in the odd indices (1, 3, 5...). Use target-action to respond to the user selecting each option/button.
3. Implement the table view delegate method so that only the even cells (menu headers) are selectable, and implement selection logic to expand/collapse the corresponding odd cell (inside -tableView:didSelectRowAtIndexPath:). For example, selecting the cell at index 0 ("Account") results in expanding/collapsing the cell at index 1 (menu with options "Profile", "Activate Account", "Change Password").

It is not the most elegant use of UITableView, but will get the job done.