thinking

The idea is simple, manipulating the model data or controlling the display of the interface

Look at some of the json data first

"chapterDtoList": [{
            "token": null,
            "id": 1295,
            "chapterName": "Chapter 1",
            "parentId": 0,
            "chapterLevel": 0,
            "attachmentUrl": "",
            "description": null,
            "startDateTimestamp": null,
            "endDateTimestamp": null,
            "startDate": 1490889600000,
            "endDate": 1491062400000,
            "browseCount": 0,
            "workId": null,
            "chapterStatus": 3,
            "hadRead": 0,
            "subChapterList": [{
                "token": null,
                "id": 1296,
                "chapterName": "Section 1",
                "parentId": 1295,
                "chapterLevel": 1,
                "attachmentUrl": "",
                "description": null,
                "startDateTimestamp": null,
                "endDateTimestamp": null,
                "startDate": null,
                "endDate": null,
                "browseCount": 0,
                "workId": null,
                "chapterStatus": null,
                "hadRead": 0,
                "subChapterList": [],
                "classUserReadInfo": []
            }, 

This data is typically a tableView, then separated by chapter, with the final interface as follows:

Analysis

This uses the UITableViewStylePlain style, chapterDtoList for chapters, and subChapterList for sections.We use headerView for chapter and cell for section.Then just add a click gesture to the headerView, and when you click, add an identifier to the corresponding model to control the chapter closure.

Method 1:

By manipulating the model array, we can convert the returned json data into two model arrays, chapterListArray and tempChapterListArray, by controlling the count of the subChapterList.Interface model data uses tempChapterListArray uniformly, expanding and merging are equivalent, so whether to assign nil to the section array in the chapter array

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    YJTOnlineTaskDetailModel *onlineTaskDetailModel = self.tempChapterListArray[section];

    return onlineTaskDetailModel.subChapterList.count;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    
    YJTOnlineChapeterCell *headerView = [tableView dequeueReusableCellWithIdentifier:onlineChapeterCell];
    YJTOnlineTaskDetailModel *onlineTaskDetailModel  = self.chapterListArray[section];
    headerView.backgroundColor = [UIColor whiteColor];
    headerView.onlineTaskDetailModel = onlineTaskDetailModel;
    if (section == 0) {
        headerView.tipsLableHeight.constant = 30;
    }else {
        headerView.tipsLableHeight.constant = 0;
    }
    
    
    [headerView whenTapWithBlock:^{
        
        onlineTaskDetailModel.isSelected = !onlineTaskDetailModel.isSelected;
        YJTOnlineTaskDetailModel *detailModel  = self.tempChapterListArray[section];
        if (detailModel.subChapterList == nil) {
            detailModel.subChapterList = onlineTaskDetailModel.subChapterList;
        }else {
            detailModel.subChapterList = nil;
        }
        
        [self.tableView reloadData];
        
    }];
    return headerView;
}

Method 2:

The above method is achieved by controlling the model array, and we can also use the control interface display to meet our requirements.Now that we have marked whether the corresponding model data is expanded when we click on HeadView, we can control the number of groupings in the interface.You can also achieve this by controlling rowHeight.By contrast, the method is simpler and clearer.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    YJTOnlineTaskDetailModel *onlineTaskDetailModel = self.chapterListArray[section];
    
    return onlineTaskDetailModel.isSelected ? onlineTaskDetailModel.subChapterList.count : 0;
}


 [headerView whenTapWithBlock:^{

        onlineTaskDetailModel.isSelected = !onlineTaskDetailModel.isSelected;
        [self.tableView reloadData];
        
    }];