Health Coalition Aotearoa

Note: Edits to this page should be made using Elementor editor.

#Resources - how to make filterable

Each resource is represented by an "Inner Section" on this page. Click in the Navigator to select it.

Example of an Inner Section in the Navigator view

After selecting the Inner Section you want - in the other menu - go "Advanced" and open "Attribute" - here is where we configure the valid filter options.

As noted here - each attribute must be on its own line with the key and value separated by a "|" character.

Each inner section can be given one data-type attribute and one data-topic attribute.

Valid Attribute key-value pairs

NOTE: If you want to add a new "Type" or "Topic" we will also need to modify the script below.

data-type:

data-topic:

Resources Filter Script

I have a custom script injected here to add filters for the resource sections. If any changes are required here please reach out to a For Purpose Developer for assistance.

The script is found in the HTML block underneath Filters section.

Script Backup:

<script>
  function filterResources() {
  var filterTopic = document.getElementById("filter-topic");
  var valueTopic = filterTopic.options[filterTopic.selectedIndex].value;
  var textTopic = filterTopic.options[filterTopic.selectedIndex].text;
  console.log("valueTopic", valueTopic);
  console.log("textTopic", textTopic);

  var filterType = document.getElementById("filter-type");
  var valueType = filterType.options[filterType.selectedIndex].value;
  var textType = filterType.options[filterType.selectedIndex].text;
  console.log("valueType", valueType);
  console.log("textType", textType);


  let filterMessage = document.getElementById("filter-message");

  let allResources = document.querySelectorAll("[data-topic][data-type");
  let activeFilterSelector = "";

  if (valueTopic != "") {
    // active topic filter
    activeFilterSelector += "[data-topic='" + valueTopic + "']";
  }
  if (valueType != "") {
    // active type filter
    activeFilterSelector += "[data-type='" + valueType + "']";
  }

  if (activeFilterSelector != "") {
    // hide all initially
    allResources.forEach(resource => {
      resource.style.display = "none";
    });

    let filteredResources = document.querySelectorAll(activeFilterSelector);

    // show ones matching filter
    filteredResources.forEach(resource => {
      resource.style.display = "block";
    });

    if (filteredResources.length == 0) {
      filterMessage.innerHTML = "<p>No matching results. Please adjust filters above to search again.</p>";
    } else {
      filterMessage.innerHTML = "";
    }

  } else {
    // no active filter - show all resources
    allResources.forEach(resource => {
      resource.style.display = "block";
    });

    filterMessage.innerHTML = "";
  }


  document.getElementById("resources-header").scrollIntoView();
  }
  </script>

  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-column elementor-element" style="justify-content:center;">
      <select id="filter-topic" class="form-control" onchange="filterResources();" style="max-width:300px; margin:.5rem;">
        <option value="" selected="">Select a topic</option>
        <option value="food">Food</option>
        <option value="hca">HCA</option>
        <option value="smokefree">Smokefree</option>
        <option value="te-tiriti-o-waitangi">Te Tiriti o Waitangi</option>
      </select>
    </div>
    <div class="elementor-column elementor-element" style="justify-content:center;">
      <select id="filter-type" class="form-control" onchange="filterResources();" style="max-width:300px; margin:.5rem;">
        <option value="" selected="">Select type of resource</option>
        <option value="fact-sheet">Fact sheet</option>
        <option value="guidelines">Guidelines</option>
        <option value="open-letter">Open letter</option>
        <option value="policy-briefing">Policy briefing</option>
        <option value="report">Report</option>
        <option value="submission">Submission</option>
        <option value="survey">Survey</option>
      </select>
    </div>
  </div>

  <div class="elementor-container elementor-column-gap-default" style="justify-content-center">
    <div id="filter-message" class="elementor-column elementor-element" style="color:#fff; margin-top:1rem; font-family: inherit;"></div>
  </div>

Table of Contents