"Selection of subcategories in categories" or "Clicking on a new selection will remove the previous selection"

Hello friends, I am trying to create a single selection tool that contains these 2 components:

  • Accordion (For the titles of the categories)
  • Checkboxgroup (For the titles of the subcategories)

In summary: I try to do that when selecting a new filter, the previous selected filter is eliminated so that it shows that new selection eliminating the previous selection.

Explanation of the problem:
Currently without code something functional can be achieved, but it has a problem and that is that when clicking on a second subcategory of a checkboxgroup, it is matched with the first selection that was made of the first checkboxgroup, making the filter similar in both categories.

What I want is for the user when he clicks on a subcategory to only show him what is in that subcategory, and if he clicks on another subcategory it will only show him what is in that new subcategory by removing the previous subcategory from the selection.

Also that when they click on a category or on an accordion title, it shows them all the collection items that are in that category.

Practically it is to make that when the user clicks on a new selection, the previous selection is eliminated and that’s it.

Below I share an example of how the selection system would be.

I’m currently working on creating this, and as soon as I get it done, I’ll share it here so it can be of use to other people.

But if anyone has an idea how to do it I would be very grateful for the help.