Create a button-style search filter

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to create a button-style search filter for my View. The button should toggle a filter option on or off, like a checkbox, but should look like a button with on/off states.

Solution: Views doesn't currently offer a button-style filter, so you would have to use a checkbox or radio filter and custom CSS to style the inputs.

Relevant Documentation:
http://jsfiddle.net/zAFND/4/
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Custom search, Views plugin

This topic contains 3 replies, has 3 voices.

Last updated by nicholasM 6 years, 4 months ago.

Assisted by: Christian Cox.

Author

Posts

October 2, 2018 at 2:27 pm #1119120

dieterS-2

Is it possible to build a filter in Toolset Views for the user-defined search that lists all categories and then displays buttons with the corresponding names?

hidden link

The Design is for 1080x1920px

October 2, 2018 at 9:29 pm #1119310

Christian Cox

Hi, it sounds like you want to create a custom search View with a taxonomy filter, but instead of using checkboxes or radio inputs you want to display buttons that act like checkboxes. Unfortunately there is no "button" filter type in Views. You would have to use a checkboxes filter type, then write custom CSS to format those inputs and labels to look like buttons. Filter design customization is outside the scope of support we provide here in the forums, unfortunately, and will require advanced CSS knowledge. The concept is similar to this example:
http://jsfiddle.net/zAFND/4/
Another example you can reference:
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

If you'd like to request our developers add a "button" filter type, I encourage you to submit a new ticket in the Forum using the "suggest an improvement" option. Our developers will evaluate your request and decide whether or not to implement this feature.

October 5, 2018 at 8:36 am #1121447

dieterS-2

My issue is resolved now. Thank you!

December 22, 2020 at 10:43 pm #1884473

nicholasM

that would be easy if the toolset markup still 3 years later would ADD a span around the label or SOMETHING to hook onto for an active state.