FAQ List with Disclosure Groups

struct FAQDisclosureStyle: DisclosureGroupStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            Button {
                withAnimation {
                    configuration.isExpanded.toggle()
                }
            } label: {
                HStack(alignment: .firstTextBaseline) {
                    configuration.label
                        .fontWeight(.medium)
                    Spacer()
                    Image(systemName: configuration.isExpanded ? "minus" : "plus")
                        .foregroundStyle(Color.accentColor)
                }
                .animation(.easeInOut, value: configuration.isExpanded)
            }
            .contentShape(Rectangle())
        }
        .buttonStyle(.plain)
        
        if configuration.isExpanded {
            configuration.content
                .font(.body)
        }
        
    }
}


struct FAQListWDisclosureList: View {
    var body: some View {
        List {
            Section(header: Text("Frequently Asked Questions")) {
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
                DisclosureGroup("What is Compot?") {
                    Text("Compot is great")
                }
            }
            .disclosureGroupStyle(FAQDisclosureStyle())
        }
        .headerProminence(.increased)
    }
}

#Preview {
    FAQListWDisclosureList()
}