Filter accordion

<div id="ID_Filters">
  <div class="accordion" id="FiltersAccordion">
    <div class="ssPanel">

      <!-- Accordion trigger -->
      <button class="ssFilterHeader" type="button"
              data-toggle="collapse" data-target="#Filters_Data"
              aria-expanded="false">
        <i class="bi bi-sliders"></i>
        <span class="ssFilterTitle">Filters</span>
        <span id="ID_FilterPills" class="ssFilterPillBar"></span>
        <i class="bi bi-chevron-right ssFilterArrow"></i>
      </button>

      <!-- Collapsible body -->
      <div class="collapse" id="Filters_Data"
           data-parent="#FiltersAccordion">
        <div class="ssFilterBody">

          <div class="ssFilterColumn" name="leftFilters">
            <!-- all your left hand columns go here -->
          </div>

          <div class="ssFilterColumn" name="rightFilters">
            <!-- all your right hand columns go here -->
          </div>

        </div>

      </div>

    </div>
  </div>
</div>

//This is the JS that you will need to put into the method
document.querySelector(".ssFilterHeader").addEventListener("click", function () {
	  var expanded = this.getAttribute("aria-expanded") === "true";
	  this.setAttribute("aria-expanded", String(!expanded));
	});

//Provides the shortcut
$(document).off("keydown.leaveFilters").on("keydown.leaveFilters", function(e) {
	if (!$("#Filters_Data").hasClass("show")) return;

	if (e.key === "Escape") {
		if (e.target.tagName === "SELECT") e.preventDefault();
		clearFilters();
	}
});

//If you filters that are applied by default, you should
//always call renderFilterPills() on load
$(document).ready(function() {
	renderFilterPills();
});