Configure Filtering for Groups

[onedaybefore]

Hello!
I wanted to thank for such a large-scale solution for finding and filtering elements

I am interested in how to configure filtering for filter groups as here https://codepen.io/desandro/pen/eYNEpQ

Only in my case is it possible to select several filters. Can you please suggest how to insert filtering for groups here https://codepen.io/bryguy25/pen/yXVeWR ?

[thesublimeobject]

@onedaybefore — Could you please explain in a bit more detail? Is that second Pen the one you've been working on? What has and hasn't worked for you so far, and insofar as "suggesting how to insert filter groups", how do you want it to behave exactly? Do you want all the filters that can be selected merged together in an intersection filter or do you want a union filter, etc.?

Thanks

[onedaybefore]

@thesublimeobject - In the first pen, when you select red, small, rounded, I will only see a red small round object. I need it to be the same in the second pen

So that when choosing a College and Degree level, only a college with this level is opened, and now when choosing a college and level, all elements that belong to this college AND level are opened

For example, if you select Engineering and Graduate, blocks that are not Engineering are opened. How do I make sure they don't open?

[onedaybefore]

@thesublimeobject Hello!
Can you suggest how to do this?

[thesublimeobject]

@onedaybefore — As it stands, you are simply adding all of filters, when clicked, to a single array, and then passing that array to the Isotope instance. This isn't working the way you would like because you aren't actually categorizing the filters and only sorting them once per category.

For example, in the second CodePen you can select more than one option per category, whereas you can only select one at at time in the first one. In addition, the first one has the function concatValues, which is helping gather the correct filter for each category and gluing them together.

I would suggest you try to implement some of the code from the first one in your second, alternate example. Let me know if you have any other questions!

[onedaybefore]

I did it, but now hash, search and clean form worked with error. If I search and after cleared the form hash is cleared, but in fact checked blocks dont refresh. You can see live here: https://codepen.io/Daniyar01/pen/MWQVgrM and try to change a filter. Can anyone help me with it? Or maybe somebody have a solution to do this form https://codepen.io/bryguy25/pen/yXVeWR with OR group filter? Is a great form, but I need to group OR filter, for example .group1filter1.group2filter1, .group1filter2.group2filter2 etc. This like a make with change 1-2 strokes of code, but I really don't know how to do it, please help me

[onedaybefore]

I have only one form left to do. I am sure this will help many, because in most cases this form is used. Who knows js well will be able to solve this issue in just a few minutes, and I have been trying to find a solution for a month

[thesublimeobject]

@onedaybefore — Do you perhaps have an english version of that first pen? Since I don't read Russian it makes it a bit hard to read/debug.

Also, did you look at the extras page? It has tons of examples like this; for instance — https://codepen.io/desandro/pen/YzeMxe.

[onedaybefore]

@thesublimeobject Yes, of course I saw this example. I studied about 400 similar questions, looked at other solutions and I managed to combine this example https://codepen.io/SamarHassan/pen/dyoazYR with this https://codepen.io/bryguy25/pen/yXVeWR

Now my filter works correctly, but I can't deal with the hash in any way

In fact, https://codepen.io/bryguy25/pen/yXVeWR this is an ideal solution for many problems, but only if there was an opportunity to choose between AND or OR. The hash here works correctly, I tried to configure the hash by analogy with this example, but my filter stopped working

Maybe you can help, maybe you can change the type of filtering in this example https://codepen.io/bryguy25/pen/yXVeWR or put a hash in this example https://codepen.io/SamarHassan/pen/dyoazYR?

Or can you at least tell you how to set up the hash correctly?