[solved] How to Customize the Filter Tabs

Feature Requests / Improvements
1

Hi!
Do you have any suggestions on how to move the All tab to the end and the Bread tab selected by default?

This is the site

Is this feature available in the current version of Bricks?

Thanks!

2

Update:

I was able to move the tabs using CSS and tried using JS to activate the first tab but had no luck.

This is my CSS code

ul%root% li:first-child {
   order: 100;
}

This is my JS

// jQuery(document).ready(function($) {
//     $('#brxe-frmiqu ul li:nth-child(2) span.bricks-button').trigger('click');
// });

jQuery(document).ready(function($) {
    $('#brxe-frmiqu ul li:first-child span.bricks-button').addClass('active');
});

Any suggestions? Thanks!

3

One thing that i notice. is your JS code. Even if you make that thing first child using order. it will not change the sequence in html code. And your js is selecting :first-chilld this means “All” is getting selected as first child.

4 
window.addEventListener('DOMContentLoaded', function(){
  const filterWrapper = document.querySelector('.menu-filter-wrapper');
  const filterItems = filterWrapper.querySelectorAll('li');
  filterItems.forEach(li =>{
      const input = li.querySelector('input');
      const span = li.querySelector('span');
      input.checked = false;
      span.classList.remove('active');
  })
     const activeElement = document.querySelector('.menu-filter-wrapper li:has( [value="breads"])');
     const input = activeElement.querySelector('input');
     const span = activeElement.querySelector('span');
     input.click();
    


});

Change this:
.menu-filter-wrapper this will be your wrapper class of filter.
[value=“breads”] value should be what you want to active.

1 Like
5

Thank you so much for your help on this. It worked like a charm