cryowning

Там используется https://greensock.com/scrolltrigger/ не думаю что это видео

Кастомизировать через библиотеку, а с данными работать через js. Как один из вариантов: ставишь на селект города pointer-events: none;, после выбора страны добавляешь активный класс типо "country_selected", на этот класс вешаешь стили для селекта города pointer-events: all;, Если правильно понял должно подойти)

Вместо твоего кода сделал вот так:

$('.card-header').click(function() {
    $(this).toggleClass('active-accordion').next().slideToggle();
    $('.card-header').not(this).removeClass('active-accordion').next().slideUp();
});

<style>
        .collapse {
            display: none;
        }
    </style>

    <div class="faq-accordion">
        <div class="js-accordion">
            <div class="card">
                <div class="card-header">
                    <button class="btn btn-link" type="button">
                <span>1</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                  <path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
                  </path>
                </svg>
              </button>
                </div>
                <div class="collapse" style="display: block;">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <button class="btn btn-link" type="button">
                <span>2</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                  <path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
                  </path>
                </svg>
              </button>
                </div>
                <div class="collapse">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                    </div>
                </div>
            </div>
        </div>
    </div>