Conditional Filter

by Darko

HTML

<ul>
  <li>
    <a href="#" class="all-topics" reset href="#">Show All</a>
  </li>
  <li>
    <header>Resources</header>
    <ul class="filter-resources">
      <li class="branding case-studies content-marketing-storytelling marketing-analytics marketing-services outsourced-marketing sem-paid-advertising seo-organic-search">
        <a class="" href="#">Case Studies</a></li>
      <li class="downloads fractional-cmo marketing-strategy outsourced-marketing">
        <a class="" href="#">Downloads</a></li>
      <li class="company-culture marketing-insights marketing-strategy outsourced-marketing">
        <a class="" href="#">Marketing Insights</a></li>
      <li class="marketing-analytics marketing-strategy tools">
        <a class="" href="#">Tools</a>
      </li>
      <li class="company-culture marketing-strategy videos-podcasts">
        <a class="" href="#">Videos &amp;odcasts</a>
      </li>
    </ul>
  </li>
  <li>
    <header>topics</header>
    <ul class="filter-topics">
      <li class="ai digital-marketing marketing-insights social-media">
        <a class="" href="#">AI</a>
      </li>
      <li class="branding marketing-insights marketing-strategy">
        <a class="" href="#">Branding</a>
      </li>
      <li class="business-strategy marketing-insights marketing-planning">
        <a class="" href="#">Business Strategy</a>
      </li>
      <li class="company-culture marketing-insights marketing-strategy outsourced-marketing">
        <a class="" href="#">Company Culture</a>
      </li>
      <li class="branding content-marketing-storytelling digital-marketing marketing-insights seo-organic-search">
        <a class="" href="#">Content Marketing &amp; Storytelling</a>
      </li>
      <li class="digital-marketing marketing-insights outsourced-marketing">
        <a class="" href="#">Digital Marketing</a>
      </li>
      <li class="company-culture content-marketing-storytelling eos marketing-insights">
        <a class="" href="#">EOS</a>
     ...

CSS

.off {
  display: none;
}

JavaScript

const show_all = document.querySelector('.all-topics');
const links = document.querySelectorAll('.filter-resources a');
const topics_items = document.querySelectorAll('.filter-topics li');

show_all.addEventListener('click', function(event) {
  topics_items.forEach(topics_item => topics_item.classList.remove('off'));
  event.preventDefault();
});


links.forEach(link => {

  link.addEventListener('click', function(event) {

    links.forEach(link => link.classList.remove('active'));
    this.classList.add('active');
    event.preventDefault();

    const active_resource = document.querySelector('.filter-resources a.active');

    if (active_resource !== undefined && active_resource !== null) {

      let active_resource_filter = active_resource.parentElement;

      let classes = Array.from(active_resource_filter.classList);

      for (let topics_item of topics_items) {

        topics_item.classList.remove('off');

        for (let i = 0, j = classes.length; i < j; i++) {

          if (topics_item.classList.contains(classes[i])) {
            topics_item.classList.remove('off');
          } else {
            topics_item.classList.add('off');
          }
        }

      }

    } else {

      topics_item.classList.remove('off');

    }

  });

});