Создание выпадающего фильтра

Question

Мне было интересно, могу ли я получить помощь в создании выпадающего фильтра для классов. Я смотрел на этот пример: https://codepen.io/luciopaiva/pen/YXYGYE?editors=101, но разница в том, что я использую Twig из плагина Advanced Custom Fields, поэтому я не могу вручную ввести данные в HTML. Вот HTML, который я использую. Я пытаюсь сделать так, как это фото. Смотрите изображение здесь У меня нет стиля, но это логика c Я пытаюсь достичь. По сути, я пытаюсь создать относительный фильтр, основанный на том, что нажимает посетитель, и отображать правильное поле ниже относительно курса. ПОЖАЛУЙСТА ПОМОГИ!! Спасибо!

HTML:

   <div class="course-selections filter-section without-background no-left-right">
  <div class="customlayout">
    {% set category = bloc.training_course_list_compact %}
    <h2 class="center-title">{{ category.headline }}</h2>
    <div class="inner-class-selection filter-inner-section">
        <div class="filter-courses filter-area">
          <div class="filter" id="course-solution">
            <div class="upper-filter"><h3>Solutions</h3><i class="fas fa-angle-down"></i></div>
            <div class="filter-dropdown">
            {% for category in bloc.training_course_list_compact.course_categories %}
            {% set titleupper = category.title %}
              <h4>{{ titleupper|e('wp_kses_post') }}</h4>
            {% endfor %}
            </div>
          </div>
          <div class="filter" id="course-type">
            <div class="upper-filter"><h3>Class Format</h3><i class="fas fa-angle-down"></i></div>
             <div class="filter-dropdown">
            {% for category in bloc.training_course_list_compact.course_categories %}
            {% for course in category.get_field('courses') %}
             {% for classformats in course.get_field('dates') %}
              {% set classformat = classformats.class_format %}
               {% if classformat == "Lecture" %}
                <div class="class-types type-filter lecture"></div>
              {% elseif classformat == "Online" %}
                <div class="class-types type-filter online"></div> 
              {% endif %}

            {% endfor %}
            {% endfor %}
            {% endfor %}
          <div class="class-title-type type-filter lecture-type"><h4></h4><span></span>
            </div>
            <div class="class-title-type type-filter online-type"><h4></h4><span></span>
            </div>
          </div>
        </div>
        <div class="filter" id="course-location">
          <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
          <div class="filter-dropdown">
          {% for category in bloc.training_course_list_compact.course_categories %}
          {% for locationcourse in category.get_field('courses') %}
          {% for location in locationcourse.get_field('dates') %}
            <div class="course-location" data-value="{{ location.location }}"></div>
          {% endfor %}
          {% endfor %}
          {% endfor %}
          <div class="class-location type-filter"></div>
          </div>
        </div>
        <div class="filter" id="course-date">
          <div class="upper-filter"><h3>Start Date</h3><i class="fas fa-angle-down"></i></div>
          <div class="filter-dropdown">
          {% for category in bloc.training_course_list_compact.course_categories %}
          {% for datecourse in category.get_field('courses') %}
          {% for dates in datecourse.get_field('dates') %}
            <div class="course-date" data-value="{{ dates.date }}"></div>
          {% endfor %}
          {% endfor %}
          {% endfor %}
          <div class="class-date type-filter"></div>
        </div>
        </div>
      </div>
      <div class="class-blocks">
      {% for category in bloc.training_course_list_compact.course_categories %}
      {% set thumbnail = category.thumbnail %}
      {% set link = category.link %}
      {% set titleupper = category.title %}
          {% for course in category.get_field('courses') %}
          {% set link = course.link %}
          {% set title = course.title %}
          <div class="class-block">
            <a class="class-block-link" href="{{ link|e('esc_url') }}">
              <div class="image">
              </div>
                <h3>{{ title|e('wp_kses_post') }}</h3>
                <h4>{{ titleupper|e('wp_kses_post') }}</h4>
            </a>
            <a class="course-link" href="{{ link|e('esc_url') }}">Course</a>
          </div>
          {% endfor %}
      {% endfor %}
      </div>
    </div>
  </div>