Categorising page content by Tags

Hello! 

I would like to categorize Coaches on this page using the tags that can be clicked on by website visitors. 

This is how the page currently looks.  https://www.femaleentrepreneur.me/our-coaches( first screenshot). I was able to create anchor links, however it can only show one coach per label. I would like it to pull several coaches per tag. (like in the second and third screenshots).  Any suggestions on how can I do that? Thank you in advance! 

You need to use a collection like a blog to hold the images and descriptions and then use universal filter to make the filtering part work like this I did here https://www.motheruntitled.com/experts

In this site, the coaches are each a blog post and the popup is from the blog post content itself, the grid is the blog page but you can also do this with a summary block.

Universal filter is here (affilliate link...) https://www.bergendesign.co/universal-filter

Hi @JayVanDyke! 

thank you for your reply. I've purchased the extension and added to the page, however i cannot figure out how to remove the "sort" part so its not visible at all. Maybe you could help? 

Here is the code I've added to the page 

<link rel="stylesheet" href="//assets.squarewebsites.org/custom-filter/custom-filter.min.css"/>
<script>
window.customFilterSettings = {
    'targets': [{
        container: '#block-yui_3_17_2_1_1710153038882_4372',// css selector for filter container
        items: '.summary-item',// css selector for items to filter
        settings: {
            position: 'left',//set the position for filter to appear. May be: top, left, right
            align: 'left',// align filter options, may be: left, center, right, space-between
            showItemsCount: false, // show (true) or hide (false) Items count
            collectionUrl: '/new-blog-1',// you need to set source collection url slug (like /blog) if your items have external links (not linked to themselves)
            itemsCount: {
                enabled: false, // same as showItemsCount
                text: '', // set the items text before counter, it is Items: by default and you may set your own text
                positionOrder: 1 // items counter position, higher means last
            },
            keepDropdownsOpenOnInit: false, // if set to true, dropdowns will be opened initially
            customClasses: 'lite-dropdowns',
            /* Add any custom classes to filter container if you want to have your own to use in CSS styling,
            available: cf-sort-right (move sorting element right), cf-sort-left (move sort left), lite-dropdowns(gives lighter dropdowns stylings), cf-ctrls-inline (makes dropdowns fit one line space)*/
            view: 'dropdowns', // available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline
            sticky: {// if enabled: true - trying enable sticky position of Filter to be seen on scroll
                enabled: false,
                top: '6%'
            },
            simpleFilter: {
                show: {
                    effect: 'fade',
                    transitionDuration: 300,
                    stagger: 60
                },
                hide: {
                    effect: 'fade',
                    transitionDuration: 100,
                    stagger: 18
                }
            },
            pagination: {
              enabled: true, // enable pagination
              pageSize: 30, // set the page size to 30
            },
            /*----Mobile Panel Section----*/
            mobilePanel: {// control if you want to have separate offscreen panel with filters on small screens
                enabled: true,// if set to false, no filter buttons on mobiles will be showed
                triggerButtonName: 'Filter', // trigger button text
                keepDropdownsOpen: null, // if false it overrides desktop settings, if true - dropdowns opened
                closeOnSelect: false, // mobile panel closed just after user selected something
                closeOnSearch: false, // mobile panel closed if user searced something in searc field
                closeOnOutsideClick: false // if true, mobile panel will be closed if user clicks outside it
            },
            /*----Filters Section----*/
            filter: { // here you define all filters you need and name them
                category: false, // disabling default Category dropdown
                tag: false, // disabling default Tag dropdown
                items: [{
                    name: 'Category', // give the dropdown (fiter entity) name you want
                    multiple: true, // if true, allow to select multiple options
                    logic: 'and', // how to combine dropdown options with other dropdowns logic. Other value is or
                    multipleLogic: 'or',// combine each selected option with OR or AND logic within one dropdown
                    closedSubOptions: false, // works for Products 7.1 subcategories onl
                    sort: 'asc', // may be asc, desc, asAllowed (need define options list in allowedOptions), or your own custom function
                    getAttr: 'categories'// here you say Filter to look for options in items categories
                }, {
                    name: 'Tags',// give the dropdown (fiter entity) name you want
                    multiple: true,//if true, allow to select multiple options
                    getAttr: 'tags'// here you say Filter to look for options in items tags
                }]
            },
            sort: {// define the sorters
                enabled: true,// if false - no sorters visible/working
                //defined: 'date_desc',// select which of defined sorters will work initially
                items: [{
                    name: 'Alphabetical',
                    order: 'asc|desc',
                    orderTexts: 'A-Z|Z-A',
                    hideName: true,
                    sort: '.summary-title-link'
                },{
                    name: 'Date',// name your sorter
                    order: 'asc|desc',// apply the orders you want to use
                    orderTexts: 'Older|Newer',// name the orders in format you need
                    hideName: true,// if true, you will not see Date name
                    sort: '[data-publish-on] parseInt'//if properly configured, each Squarespace item will have publish date as data attribute. parseInt saysFilter operate it as integer number
                }, {
                    name: 'Price',// name your sorter
                    order: 'asc|desc',// define orders
                    hideName: true,// hide the Price name
                    orderTexts: '$-$$$|$$$-$'// define orders naming
                    /* If sorter named as Price, you do not need define sort selectors or function: it will work the same like you defined:
                    sort: '[data-price] parseInt'
                    */
                }]
            },
            search: {
                enabled: true,// if false, no Search input will be showed
                text: 'Search', //set the placeholder to your search field, otherwise Search will be used
            }
        }
    }]
};
</script>
<script src="//assets.squarewebsites.org/custom-filter/custom-filter.min.js"></script>

under the sort settings in your code, change it to "false"

Thank you @JayVanDyke!

following the same logic i am struggling to remove the category option. The "business" button visible in the screenshot. 

Here is the snipped of the code where changed it to false 

That part is different. Remove everything between these two red marks including the comma and those curly brackets.

Last question, I promise @JayVanDyke 😄

using the code prived is it possible to change the colour of the buttons?