Conditionally Display Refinement List Depending on Selected Hierarchical Menu Item


I’m using Laravel and InstantSearch JS (previously Vue InstantSearch).

I want to show or hide a refinement list depending on the selected value of my hierarchical menu.

For example one of the parent options in my hierarchical menu is “Music”.

I want to show or hide a refinement list for “Music Genre” depending on if “Music” is selected or not.

Thanks in advance for any help.


You can use the panel widget to hide inner widgets based on the InstantSearch state.

I made an example on this sandbox which hides the refinement list when “Appliances” is selected in the hierarchical menu.

This is great, thank you.

I’ve just realised that I’ve perhaps explained myself badly.

My refinement lists do (of course) conditionally display depending on filtered hierarchical items and other search parameters.

I want my refinement lists to show only if a certain parent item in the hierarchical menu is selected.

For example by default the “Music Genre” refinement list should be hidden and only shown if the “Music” item is selected in the hierarchical menu.

Hope this makes sense, thanks for your help.

If I understand correctly, you want to reverse the condition for the refinement list not to show by default except when a specific hierarchical category is selected, right?

That’s correct, yes.

It appears I may have solved this by using the “Collapse” method instead of “Hidden”.

const refinementListWithPanel = instantsearch.widgets.panel({
            collapsed: ({ state }) => {
                return( state.hierarchicalFacetsRefinements['service.lvl0'] != 'Music' );

Thanks for showing me that previous CodePen.

Nice! Note that if your hierarchical menu has multiple levels (more than lvl0), the != expression won’t be enough because you don’t cover cases where the value is Music > Rock for instance. This is the reason why I used indexOf in the sandbox (you can use startsWith if your browser supports it).

I’ve noticed that.

I’m struggling to show the refinement list when any of the children are selected using a similar approach to that CodePen you linked.

The CodePen was for if Appliances or its children were selected, how do I do the opposite (for if they’re not selected) ?

You need to reverse the condition in the hidden function. I updated the sandbox so you can reload the page and check the code again.

Perfect, that works really well!

Thank you for your help.