Members community gallery dynamic filtering question

Design help General
1

Hi guys, im currently facing a situation that i do not exactly know how to solve best with webflow. However i would like to do it in webflow to prove the point that it can be done.

So heres my issue.
For a community we would like to set up a memberpage. The community is divided over several companies. so basically what i would like to see. Is an entire overview, with all members, and if u click on one of the companies (the list on the right) you would see the list hide the other members, and only show the ones in that company.

So basically i’d like my dynamic list to be sorted by the users, based on companies.

But as far as i could figure out, we cannot let the users use those filters.
So i thought the “reference” could help me, but that also doesn’t allow to make it hide and show our members.

Another option i thought of was trying to use a dynamic list of our members, and then do the filtering based on a plugin like isotope “here” . While making the information about a company be hidden/viewed by means of webflow interactions.

However both these ways are such workaround and take putting dynamic data, and combining that with a lot of static data.

So im hoping that someone might have some tips!

3264Ă—2448 687 KB

Here is my public share link: LINK
(how to access public share link)

2

Hi @burt

If you have no more than 19 companies in your community, then such filtering can be easy done by using Webflow tabs widget and pre-filtered collections of members.

Using jquery filtering plugin with dynamic content could become complicated task, since it based on different class names or id.

Regards,
Anna

3

Hi Sabanna, Thanks for your reply, but the community right now has 15 companies, however were expecting more people to join.

So today i’ve been trying to get something similar to Rumi to work based on your tutorial , however im stranded on the problem that i cannot add a class to particular groups of a dynamic list.


917Ă—14 5.67 KB

So top is mine, bottom is Rumi, meaning that he gave it an additional class “coos” on which he can later filter with isotope.

Is there anyone who might know how to do this?

4

Seems he used code snippet which can create class from category names

<script>
jQuery('.w-dyn-item .categoria').each(
  function(index, element) {
    var _this = jQuery(element);
    _this.parent().parent().addClass(_this.text().toLowerCase());
  }
);
</script>
5

Thanks a bunch! Im hoping that i will have time soon to try this out! Will share my results here

1 Like
6

Had time today! It worked! Not that difficult with this piece of code :smiley:

For now just a WIP, but will finish this website as soon as our designer is done.
http://beanss-filtered-content.webflow.io

If you need help regarding this :slight_smile: post here.

1 Like
7

Cool! :slight_smile: Glad to see it works :smiley:

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.