Использование JQuery .show () и .hide () приводит к тому, что скрытый div не отображается должным образом

Question

Итак, у меня есть раскрывающееся меню с кодом HTML для моего сайта Wordpress, как показано ниже.

 //create functions for dropdown menu
 function dropDown() {
    jQuery('#ContentSelector').on('change', function () {

        //If Courses is selected, show Courses, hide Podcourses and Webinars.
        if (this.value == 'Courses') {
            jQuery("#Test1").show();
            jQuery("#Test2").hide();
            jQuery("#Test3").hide();
            jQuery("#Courses").show();
            jQuery("#Podcourses").hide();
            jQuery("#Webinars").hide();
        }

        //If Podcourses is selected, show Podcourses, hide Courses and Webinars.
        if (this.value == 'Podcourses') {
            jQuery("#Test1").hide();
            jQuery("#Test2").show();
            jQuery("#Test3").hide();
            jQuery("#Courses").hide();
            jQuery("#Podcourses").show();
            jQuery("#Webinars").hide();
        }

        //If Webinars is selected, show Webinars hide Courses and Podcourses.
        if (this.value == 'Webinars') {
            jQuery("#Test1").hide();
            jQuery("#Test2").hide();
            jQuery("#Test3").show();
            jQuery("#Courses").hide();
            jQuery("#Podcourses").hide();
            jQuery("#Webinars").show();
        }

    });
}
jQuery(document).ready(dropDown());

.Content{
  display: none;
  text-align: center;
}
#ContentSelector{
  width: 100%;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="ContentSelector">
   <option value="Courses">Courses</option>
   <option value="Podcourses">Podcourses</option>
   <option value="Webinars">Webinars</option>
</Select>
<div id="Courses" class="Content"> Courses... </div>
<div id="Podcourses" class="Content"> Podcourses... </div>
<div id="Webinars" class="Content"> Webinars... </div>

Это отлично работает, за исключением случаев, когда специально выбираются разные пункты меню. Это может вызвать проблемы с нижним колонтитулом темы. Иногда (особенно из-за того, что размер содержимого между тремя вариантами выбора различается) нижний колонтитул плавает над пространством, которое должен занимать div. Кроме того, содержимое div часто накладывается друг на друга.

Ссылка на страницу, над которой я работаю. Если вы щелкните раскрывающееся меню и выберите «Подкурсы», вы сможете воспроизвести проблему. Это работает как для зарегистрированных, так и для вышедших из системы пользователей.

JSFiddle с минимальным рабочим кодом

Я использую Beaver Builder для создания веб-страницы и использую пакет дополнений Powerpack конкретно этот модуль введите здесь код для содержимого div. Также я использую Astra для темы верхнего и нижнего колонтитулов.

Любая помощь будет принята с благодарностью.

Изменить: Мое временное решение заключалось в том, чтобы вместо этого использовать следующие JavaScript и Jquery

  //create functions for dropdown menu
 function dropDown() {
    jQuery('#ContentSelector').on('change', function () {

        //If Courses is selected, redirect to ?content=courses.
        if (this.value == 'Courses') {
            window.location.replace("?content=courses");
        }

        //If Podcourses is selected, redirect to ?content=podcourses.
        if (this.value == 'Podcourses') {
            window.location.replace("?content=podcourses");
        }

        //If Webinars is selected, redirect to ?content=webinars.
        if (this.value == 'Webinars') {
            window.location.replace("?content=webinars");
        }

    });
}

//create function for url parameter
function urlContent(content){

    if (content == "courses") {
        jQuery('#ContentSelector').val("Courses");
        jQuery("#Course_Grid").show();
        jQuery("#Podcourse_Grid").hide();
        jQuery("#Webinar_Grid").hide();
    }
    else if (content == "podcourses") {
        jQuery('#ContentSelector').val("Podcourses");
        jQuery("#Course_Grid").hide();
        jQuery("#Podcourse_Grid").show();
        jQuery("#Webinar_Grid").hide();
    }
    else if (content == "webinars") {
        jQuery('#ContentSelector').val("Webinars");
        jQuery("#Course_Grid").hide();
        jQuery("#Podcourse_Grid").hide();
        jQuery("#Webinar_Grid").show();
    }
    else {
        jQuery('#ContentSelector').val("Courses");
        jQuery("#Course_Grid").show();
        jQuery("#Podcourse_Grid").hide();
        jQuery("#Webinar_Grid").hide();
    }
}
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

var content = 'default';
content = getUrlParameter('content');
jQuery(document).ready(urlContent(content));
jQuery(document).ready(dropDown());