Collapsible list

No. 1 and 2 work only and only if the list is in a NavigationView

1. Using VStack

struct CollapsibleListView: View {
    let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                   911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
    let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                       i3","Chevrolet Bolt EV","Audi e-tron"]
    var body: some View {
        NavigationView {
            VStack {
                List {
                    Section(header: Text("Fast cars")) {
                        ForEach(fastCars, id: \.self) { car in
                            Text(car)
                        }
                    }
                    
                    Section(header: Text("Electric cars")) {
                        ForEach(electricCars, id: \.self) { electric in
                            Text(electric)
                        }
                    }
                }
            }
         }
    }
}

2. Using listStyle

struct CollapsibleListView: View {
    let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                   911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
    let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                       i3","Chevrolet Bolt EV","Audi e-tron"]
    var body: some View {
        NavigationView {
                List {
                    Section(header: Text("Fast cars")) {
                        ForEach(fastCars, id: \.self) { car in
                            Text(car)
                        }
                    }
                    
                    Section(header: Text("Electric cars")) {
                        ForEach(electricCars, id: \.self) { electric in
                            Text(electric)
                        }
                    }
                }
                .listStyle(.sidebar)
         }
    }
}

3. Custom - not practical for many sections

   struct SectionHeaderView: View {
       var headerText: String
       @Binding var showList: Bool
       var body: some View {
           HStack {
               Text(headerText)
                   .font(.caption)
                   .foregroundColor(.gray)
               Spacer()
               Image(systemName: showList ? "chevron.down" :  
                      "chevron.right")
                   .foregroundColor(.blue)
                   .onTapGesture {
                       showList.toggle()
                   }
           }
       }
   }
   
   struct CollapsibleListView: View {
       @State private var showFirstList: Bool = false
       @State private var showSecondList: Bool = false
       let fastCars = ["Lamborghini Aventador","Bugatti Veyron","Porsche    
                      911 GT3","Ferrari 488 Pista" ,"McLaren 720S"]
       let electricCars = ["Tesla Model S","Nissan Leaf","BMW 
                          i3","Chevrolet Bolt EV","Audi e-tron"]
       var body: some View {
           List {
               Section(header: 
                         SectionHeaderView(headerText: "Fast  
                             cars",showList: $showFirstList)
               ){
                   if showFirstList {
                       ForEach(fastCars, id: \.self) { car in
                           Text(car)
                       }
                   }
               }
   
               Section(header: 
                        SectionHeaderView(headerText: "Electric 
                            cars",showList:$showSecondList)
               ){
                   if showSecondList {
                       ForEach(electricCars, id: \.self) { electric in
                           Text(electric)
                       }
                   }
               }
           }
       }
   }