Clear refinements after click

I have made a page which has tabs to get between different options (inside each tab is a different layout e.g. category buttons, date filters or a search box).

Is there a way I can also trigger clearing any current refinements when they click on a tab e.g. of they move from By Category to Search they are starting with the full listings.

Thanks for any help


 <div class="tabs">
<button class="tablinks active clear" onclick="openTab(event,'Category')">
  <h3>By Category</h3>
<button class="tablinks clear" onclick="openTab(event,'Calendar')">
<button class="tablinks clear" onclick="openTab(event,'Search')">

the script for changing tabs is:

function openTab(evt, categoryName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(categoryName).style.display = "block";
  evt.currentTarget.className += " active";

For this you can use the connectClearRefinements connector to create your tabs and call the refine() method each time someone click on a button.

Here’s a codesandbox with this:

1 Like

Thanks Yannick

Can you put in the codesandbox link please (missing)

OK - this is now working a treat

Is there a way I can also make it clear search terms as well (it doesn’t seem to clear those)

Ho sorry, I forgot the link to the CodeSandbox in my original message :upside_down_face:.
There it is:

By default the query is not cleared, is it part of the excludedAttributes.
But you can clear it by setting excludedAttributes to an empty array:

    container: document.querySelector('#tabs'),
    excludedAttributes: [],

I updated the CodeSandbox with this change.

Thanks you so much - worked a treat