Expandable and Collapsible Sections UITableView (Ep 3)

Going to answer a user request from the comments section and show the folks here how to implement expandable sections inside a UITableView. This type of behavior really reminds me of an accordion type of component you find on websites. The solution I'm implementing for today's video is pretty basic, there are plenty of improvements that you can include.

Previous Lesson:

Intermediate Training Core Data

Instagram Firebase Course

Facebook Group

iOS Basic Training Course

Completed Source Code

[gushiciaihaozhe]

Hi Brian, you saved my life again! 😀😀😀 All your tutorials are teaching real-world, practical and useful knowledge! Thanks again for your hard work and wish you all the best!

[mattyeager]

I spent way too long trying to figure this out. Thank you for this awesome video.

[eray]

very neat explanation, thank you Brian

[albaqawi]

Hi Brian, I wanted to share my work on fixing the bug on hitting the show IndexPath Nav Bar button:

inside the handleShowIndexPath() I added the condition to check on if the section isExpanded and all works now without any crash!

for section in twoDimensionalArray.indices {
if {
for row in {
print(section, row)
let indexPath = IndexPath(row: row, section: section)

}
}
}
I learned so much from handling sections with button.tag way of doing things!

[laiqueahmed]

Very nicely done, thanks for contributing to the world.

[reshmac]

How to set collapsed state as default? Please help

[danielwijono]

why if i want to delete the rows inside sections it deletes the other section as well ? what am I doing wrong ? the header cell is customized using nib.

[iosprogramming]

Hi brain, can we add or remove on a specific cell?.

[cmhine]

Nice - thanks for this. I'm still coding in Obj-C, so had to twist things about a little. I was previously hiding rows by marking my section header array as "Do not show" and then setting the table rows to ZERO for the hidden section. It worked but wasn't animating as nice as a the insert/delete rows example you have created here.

[chinmayakumar]

is there any possible way that scrollbar inside uitableview cell should always be visible?

[ГлебМ-сф]

I can't fix bug with reusable cells. If you add more items in your array and try open / close section at bottom of table view, table view will shake. Your code have the same problem. How it can be dixd? Could you please tell me? And any way thanks for video - it really helpful

[maximkrouk]

Plz, can you tell me how to make custom headers stay on top while scrolling and be pushed to top only by another header using UITableView?

[ReynierArias]

Hi all, super useful tutorial, thanks, I just included a minor improvement on my solution and is to get rid of the insert and delete rows, instead I use:
IndexSet, with: UITableView.RowAnimation), creating and IndexSet with the section number, that might be useful for someone else, again, thank you

[J-ombs]

When I add a row to the section after a blank section, it doesn't show up. It only shows up when I add a row into the empty section.

Do you know what that is?

[sat_talk]

Can we design the same feature in Android Kotlin?.

[raeesurrehman]

What should we do if we want to get different functionality on clicking on section or rows inside it..? for example i want to collapse the section on clicking expanded section...which i have done.. but i want to switch to different view controller on clicking row inside a section..

[coledaly]

Is it possible to have a button and the label at the same time?

[rakeshrock]

Thank you so much. Great video, Helped me a lot keep posting such beautiful videos.

[Abdi-uykh]

Brian, if i wanted the array to hold both the name of the header and the row data, how would i do that? Basically my question is, how could i have one array that consists both the section Title and row data and how would i call it separately. Any examples would be appreciated. Thank you.

[subhangipawar]

There is no need to delete and insert in tableview hence we can change the height of a row :-
If {
return true
} else {
return 30
}