In this tutorial, we’ll show you how you can easily change the filter buttons to a drop-down select menu. When a user clicks on a category in the dropdown, the results will filter just like they do when the filter buttons are clicked. The code provided in this tutorial will work on both the default Divi Filterable Portfolio module and the Filterable Blog module from our Portfolio Posts Pro plugin.
- Creating a select and adding it just before the first filter button
- Adding options to the select with the same values as the category slugs from each filter button
- When a select option is selected, we’re triggering a click on the matching filter button
- Hiding the original filter buttons so only the select is visible