Hide collectionView content when collectionView is collapsed

Question

I have a collectionView with expandable and collapsible sections. When I collapsed the sections, the content inside of the table View is still present. I was wondering if anyone knew how to change this? I have a UicollectionViewCell in which I create the views programmatically. However, I was thinking that my issues arrises because I'm not creating the views inside of the cellForItemAt. I will leave my code below please let me know what you think.

// this is how I create the sectionHeaders and register the collectionViewCell.

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {

    var reusableview = UICollectionReusableView()
    if (kind == UICollectionView.elementKindSectionHeader) {
        let section = indexPath.section
        switch (section) {
        case 0:
            let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: headerIdentifier, for: indexPath) as? userProfileHeader
                        if let user = self.user {
                                headerView?.myUser = user
                            } else if let userToLoad = self.userToLoad {
                                headerView?.myUser  = userToLoad
                            }
            reusableview = headerView!


        case 1:
            let sectionViews = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: skillsSection, for: indexPath) as? skillsprefSection
            sectionViews?.downArrowBtn.addTarget(self, action: #selector(showCells), for: .touchUpInside)
            sectionViews?.headerLabel.text = "Skills & Preferences"


            if expandedRow == false {
                sectionViews?.contentView.isHidden = true
            }

            reusableview = sectionViews!

        case 2:
            let bioSectionThing = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: bioSectionHeader, for: indexPath) as? bioSection
                bioSectionThing?.downArrowBtn.addTarget(self, action: #selector(showCells), for: .touchUpInside)
                bioSectionThing?.headerLabel.text = "Bio"
                reusableview = bioSectionThing!

        case 3:
            let reviewSectionThing = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: reviewSectionHeader, for: indexPath) as? reviewSection
                reviewSectionThing?.downArrowBtn.addTarget(self, action: #selector(showCells), for: .touchUpInside)
                reviewSectionThing?.headerLabel.text = "Reviews"
                reusableview = reviewSectionThing!

         case 4:
                  let recentSectionThing = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: recentSectionHeader, for: indexPath) as? recentSection
                    recentSectionThing?.downArrowBtn.addTarget(self, action: #selector(showCells), for: .touchUpInside)
                      recentSectionThing?.headerLabel.text = "Recent"
                      reusableview = recentSectionThing!
                default:
            return reusableview

        }
    }
    return reusableview

}

// this is how I expand/contract the sections

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

    if(section==0) {
        return .init(width: view.frame.width, height: 340)


    } else if (section==1) {
        if expandedRow == true {
               return .init(width: view.frame.width, height: 450)
           } else {
               return .init(width: view.frame.width, height: 133)
           }

    } else if (section==2) {
         if expandedRow == true {
        return .init(width: view.frame.width, height: 400)
        } else {
        return .init(width: view.frame.width, height: 133)
        }

    } else if (section==3) {
    if expandedRow == true {
    return .init(width: view.frame.width, height: 400)
    } else {
    return .init(width: view.frame.width, height: 133)
    }

    } else if (section==4) {
        if expandedRow == true {
        return .init(width: view.frame.width, height: 400)
        } else {
        return .init(width: view.frame.width, height: 133)
    }

    } else {
        return .init(width: view.frame.width, height: 100)
    }

}

this is how the image looks when collapsed.

and this is how the section looks when expanded.

Thanks for any and all help. My goal is for when the section is collapsed, to hide all of the content associated with that section. and show it when the section is expanded.

Answer 1

Your collection view cell out of bound just set as follow

cell.contentView.clipsToBounds = true
cell.clipsToBounds = true

Answer 2

Try below code as a sample with your own dataSource

class ViewController: UIViewController {
    private var dataSource = [MenuItems]()
    var tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        return tableView
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        configureView()
        loadJSONBundle()    }
    private func loadJSONBundle(){
        if let path = Bundle.main.path(forResource: "AllMenu", ofType: "json") {
            do {
                let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)
                if  let allMenu = try? JSONDecoder().decode([MenuItems].self, from: data){
                    self.dataSource.append(contentsOf: allMenu)
                }else{
                    print("parsing failed")
                }
            } catch {
            }
        }
    }
    func configureView(){
            self.view.addSubview(self.tableView)
            tableView.delegate = self
            tableView.dataSource = self
            tableView.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
            tableView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
            tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
            tableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
            tableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
            tableView.register(CategoryTableViewCell.nib(), forHeaderFooterViewReuseIdentifier: CategoryTableViewCell.nameOfClass)
            tableView.register(SubCategoryTableViewCell.nib(), forCellReuseIdentifier: SubCategoryTableViewCell.nameOfClass)
            tableView.separatorColor = .white
            tableView.separatorStyle = .none
        }
    func expandTableView(_ position:Int){
            if dataSource[position].open{
                dataSource[position].open = false
            }else{
                dataSource[position].open = true
            }
                self.tableView.reloadSections(NSIndexSet(index:position) as IndexSet, with: UITableView.RowAnimation.automatic)
    }
}
    extension ViewController:UITableViewDelegate{
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return UITableView.automaticDimension
        }
        func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
            return 68
        }
        func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
            let headerView = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: CategoryTableViewCell.nameOfClass) as! CategoryTableViewCell
            headerView.headerView.tag = section
            headerView.config(dataSource[section])
            headerView.onclickHandler = {[weak self] (position) in
                self?.expandTableView(position)
            }
            return headerView
        }
    }
    extension ViewController:UITableViewDataSource{
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            if dataSource[section].open {
                return dataSource[section].subCategory.count
            }else{
                 return 0
            }
        }
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = self.tableView.dequeueReusableCell(withIdentifier: SubCategoryTableViewCell.nameOfClass, for: indexPath) as! SubCategoryTableViewCell
            cell.config(dataSource[indexPath.section].subCategory[indexPath.row])
            return cell
        }
        func numberOfSections(in tableView: UITableView) -> Int {
            return dataSource.count
        }
}