Super Elementor Taxonomy Filter Hack - Multiple Select & Child Reveal

With some clever thinking you can build a Side-Bar Filter for your Posts or Products that has Dropdowns, Hidden Children, Multiple Select, and Reset Filters --- all with the native Elementor Taxonomy Filter!!

JS Code:
https://www.codesnippets.cloud/snippe...

CSS for the Filter:
/* Styling for 'All' button */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"] {
font-weight: 400;
text-decoration: underline;
font-size: 14.5px !important;
color: #999999;
background-color: #FFF;
padding: 3px 10px 3px 0px;
}

/* Styling for Parent items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="parent"] {
font-weight: 500;
color: #000;
margin-top: 20px;
background-color: #f4f0ec;
padding: 2px 10px 3px 10px;
position: relative; /* Add position relative to parent */
display: flex;
align-items: center;
justify-content: space-between;
}

/* Add icon to Parent items with children */
.elementor-widget-taxonomy-filter .e-filter-item.has-children::after {
content: '';
display: inline-block;
margin-left: 10px;
width: 1em;
height: 1em;
background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="e-font-icon-svg e-eicon-caret-down"%3E%3Cpath fill-rule="evenodd" d="M5.23 7.3a.75.75 0 011.06.02L10 11.02l3.71-3.7a.75.75 0 011.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.23 8.38a.75.75 0 01.02-1.06z" clip-rule="evenodd" /%3E%3C/svg%3E') no-repeat center center;
background-size: contain;
}

/* Styling for Child items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="child"] {
font-weight: 400;
color: #000;
font-size: 14.5px !important;
margin-top: 5px;
background-color: #fff;
padding: 3px 10px 3px 10px;
}


/* Active state styling for Child items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="child"][aria-pressed="true"] {
background-color: #ffd54d;
}

/* Active state styling for Parent items */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter^="parent"][aria-pressed="true"] {}

/* Active state styling for 'All' button */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"][aria-pressed="true"] {}


👉 Grab our $1 Business Packs: https://learn.websquadron.co.uk/#packs
👉 WordPress Hosting: https://be.elementor.com/visit/?bta=2...
👉 The Pro Page Builder: https://be.elementor.com/visit/?bta=2...

Need 1-2-1 Support: https://learn.websquadron.co.uk/#support

Join our Facebook Group:   / websquadron  
Get Code Snippets Pro: https://r.freemius.com/10565/3304295/