List Simple: Filter by Country

To create a Filter by Country in List Simple, like this

You can follow these.
#1. Suppose we will create Filter with countries: Australia, France, Singapore, UK, Canada, Indian, NZ, Hong Kong, Japan.

#2. We will need to add some text with url into List item description.

• Australia – #Australia
• France – #France
• Singapore – #Singapore
• UK – #UK
• Canada – #Canada
• Indian – #Indian
• NZ – #NZ
• Hong Kong – #HongKong
• Japan – #Japan

We will have this.

#3. Use this code to Custom CSS box

/* List Filter */
.list-filter {
    text-align: center;
    display: none;
    margin-bottom: 40px;
}
div.user-items-list .list-filter {
    display: block !important;
}
.list-filter span {
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.list-filter .active {
    border-bottom: 1px solid #000;
}

#4. Use this code to Page Header Injection

<div class="list-filter">
       <span class="filter-All active">All</span>
        <span class="filter-Australia">Australia</span>
        <span class="filter-France">France</span>
        <span class="filter-Singapore">Singapore</span>
        <span class="filter-UK">UK</span>
        <span class="filter-Canada">Canada</span>
        <span class="filter-India">India</span>
        <span class="filter-NZ">NZ</span>
        <span class="filter-HongKong">Hong Kong</span>
        <span class="filter-Japan">Japan</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('.list-filter').insertBefore('ul.user-items-list-item-container.user-items-list-simple');

   // Function to handle filter clicks
   function applyFilter(filterClass, filterValue) {
       $('.list-filter span').removeClass('active');
       $(filterClass).addClass('active');
       $('li.list-item').hide();

       if (filterValue === 'All') {
           $('li.list-item').show();
       } else {
           $('li.list-item:has(p a[href="#' + filterValue + '"])').show();
       }
   }

   // Attach click events for each filter
   $('.filter-All').click(function() { applyFilter(this, 'All'); });
   $('.filter-Australia').click(function() { applyFilter(this, 'Australia'); });
   $('.filter-France').click(function() { applyFilter(this, 'France'); });
   $('.filter-Singapore').click(function() { applyFilter(this, 'Singapore'); });
   $('.filter-UK').click(function() { applyFilter(this, 'UK'); });
   $('.filter-Canada').click(function() { applyFilter(this, 'Canada'); });
   $('.filter-India').click(function() { applyFilter(this, 'India'); });
   $('.filter-NZ').click(function() { applyFilter(this, 'NZ'); });
   $('.filter-HongKong').click(function() { applyFilter(this, 'HongKong'); });
   $('.filter-Japan').click(function() { applyFilter(this, 'Japan'); });
});
</script>

#5. To change Active item underline color, you can change this code

#6. You need to change these text

#7. To hide these #Australia, #France…text

You can use this code to Custom CSS box.

li.list-item {
  p:has([href="#Australia"]), p:has([href="#France"]),p:has([href="#Singapore"]), p:has([href="#UK"]), p:has([href="#Canada"]), p:has([href="#India"]), p:has([href="#NZ"]), p:has([href="#HongKong"]), p:has([href="#Japan"]) {
    display: none;
  }
}