Hi there,
I am trying to create a set of ‘nested’ accordions that enable the user to search and filter through a directory.
The staging site can be found here: https://p-s-bridal.webflow.io/
I followed this tutorial to create the initial accordions that sit beneath ‘Search & Filter’ - i.e. Style, Location and Max Budget.
The ‘Search & Filter’ accordion is meant to hide the other, titled ‘Styles’, ‘Locations’ and ‘Max Budget’, beneath it so that it does not take up half the screen for a mobile user (screenshot below):
The goal here is to enable the user to have a good experience on mobile whilst being able to quickly access the Search and Filter functionality whenever they need to, without taking up a lot of screen space.
The tutorial that I followed worked absolutely perfectly for the Styles, Locations and Max Budget accordions - however, you will find that when you try to use them they now have behaviour that closes the entire Styles & Filters accordion section - which then hides all of the other accordions.
The desired behaviour should be that the Styles, Locations and Max Budgets accordions have open and close interactions between them whilst not effecting the Search & Filter accordion.
I have attempted to create a separate set of classes (called Search and Filter) to solve this issue, however it does not seem to be working. I have unfortunately now run out of ideas.
Could someone please kindly help me figure this out? 
Let me know whether you need any more information.!
Here is my site Read-Only: Share a read-only link | Webflow University