Display checkbox filters on hover

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

Problem: I would like to create a faux dropdown interface that holds some checkbox filters in my custom search View. When the User hovers over a trigger, I would like a dropdown to appear with the checkboxes inside.

Solution: This type of custom filter interface would require custom code. We provide filter options as checkboxes, select fields, radio groups, and text input fields.

This support ticket is created 6 years, 7 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 2 voices.

Last updated by Christian Cox 6 years, 7 months ago.

Assisted by: Christian Cox.

Author

Posts

April 22, 2018 at 5:55 am #708699

melissaG-2

I have hierarchical taxonomy setup and a View showing a custom search with check boxes to filter the content displayed. This is working great.

My question is how can I modify the CSS or HTML output to take the list of checkbox options and place it into a faux Select dropdown when you hover on the Label?

From this:

Label
[ ] Option 1
[ ] Option 2
[ ] Option 3

To this:

Label (default) Label (hover state)
[ ] Option 1
[ ] Option 2
[ ] Option 3

April 22, 2018 at 8:28 pm #711871

Christian Cox

Can you show me an example of what you mean by a "faux select dropdown"? We don't offer much in the way of filter customization, but if it's something simple I might be able to help.

April 22, 2018 at 8:38 pm #711891

melissaG-2

Sorry for my lack of clarity. Here is an example of a site that has what I need: hidden link

Essentially, it's not a true select dropdown because it is a heading and a list with checkboxes (where you can choose multiple filters).

It's kind of like this example, but with checkboxes instead of radio buttons: hidden link

I guess I would need to create a heading and hover state to show/hide the checkbox div, correct? I'm just not certain how to do this and keep the filter checkboxes working correctly.

April 22, 2018 at 9:09 pm #711954

Christian Cox

I see, thanks. Unfortunately this is a bit more complex than I would be able to achieve for you. The types of filters we offer are checkboxes, radio groups, select fields, and text search. If you want to create a custom UI that contains your search filters, that unfortunately falls outside the scope of support we provide here. We do have a portal available where you can connect with skilled developers who may be able to provide professional assistance: https://toolset.com/contractors