<div class="my-courses-filters" style="display: none;">
  <div class="progress-filter-dropdown-container">
    <button class="progress-filter-dropdown np-button">
      <span style="margin-right: 10px">
        Not Started
      </span>
      <i class="fas fa-angle-down"></i>
    </button>
    <div class="progress-filter-dropdown-content">
      <span class="progress-filter-item" id="in-progress">In Progress</span>
      <span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
      <span class="progress-filter-item" id="completed">Completed</span>
    </div>
  </div>
</div>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    setDefaultFilter('.learning-paths-container', 'not-started')
    setDefaultFilter('.courses-container', 'not-started')
  
    document.querySelectorAll('.progress-filter-item').forEach((item) => {
      item.addEventListener('click', (clickEvent) => {
        changeFilterButtonName(clickEvent.target);
        showAllOptions();
        hideChosenOption(clickEvent.target);
        filter(clickEvent.target);
      })
    })

    document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)

    window.addEventListener("click", hideDropdown);
  });

  function hideDropdown(event) {
    if (!event.target.matches('.progress-filter-dropdown')) {
      var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
          openDropdown.classList.remove('progress-filter-dropdown-content-show');
        }
      }
    }
  }

  function showDropdown() {
    document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
  }
  
  function filter(filterOption) {
    filterItems('.learning-paths-container', filterOption)
    filterItems('.courses-container', filterOption)
  }

  function filterItems(itemsClass, filterOption) {
    document.querySelectorAll(itemsClass).forEach((item) => {
      if (!item.id.includes(filterOption.id))
        item.style.display = "none";
      else
        item.style.removeProperty('display');
    })
  }

  function setDefaultFilter(itemsClass, filterOption) {
    document.querySelectorAll(itemsClass).forEach((item) => {
      if (!item.id.includes(filterOption))
        item.style.display = "none";
      else
        item.style.removeProperty('display');
    })
  }

  function showAllItems(itemsClass) {
    document.querySelectorAll(itemsClass).forEach((item) => {
      item.style.removeProperty('display');
    })
  }

  function hideChosenOption(chosenOption) {
    chosenOption.style.display = 'none';
  }

  function showAllOptions() {
    document.querySelectorAll('.progress-filter-item').forEach((item) => {
      item.style.removeProperty('display');
    });
  }

  function changeFilterButtonName(newName) {
    document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
  }
</script>

<style>
  .my-courses-filters {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 4%;
    background: #f5f2ff;
    color: #737373;
    font-weight: 600;
    letter-spacing: .56px;
    line-height: 1.71;
    transition: .2s;
    width: 100%;
  }

  .progress-filter-dropdown-container {
    position: relative;
    display: inline-block;
  }

  .progress-filter-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .progress-filter-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }

  .progress-filter-dropdown * {
    pointer-events: none;
  }

  .progress-filter-item:hover {background-color: #f1f1f1}

  .progress-filter-dropdown-content-show {
    display: block;
  }

  @media (min-width: 768px) {
    .my-courses-filters {
      flex-direction: row;
      justify-content: right;
    }
  }
</style>