Конфликт между аккордеоном и parallax js

Используется аккордеон написанный на jquery, под ним находится секция с параллакс эффектом, при нажатии на аккордеон, он наезжает на секцию с параллаксом, вместо того, чтоб растянуть страницу вниз, как это и должно быть.. Может кто-то сталкивался с такой же проблемой и знает как решить?

пример: https://codepen.io/alexmillern/pen/oNgmOdX

<section class="competition">
    <div class="wrapper">
        <div class="accordion">
            <dl>
           <dt class="accordion__title">Dt1</dt>
               <dd class="accordion__descr">Dd1</dd>
         </dl>
        </div>
</section>

<section class="insert" data-parallax="scroll" data-image-src="https://img5tv.cdnvideo.ru/webp/shared/files/201908/1_960015.jpg">
    <div class="overlay"></div>
        <div class="insert__content">
            <h2 class="insert__title">Title</h2>
            <div class="insert__descr">Desciption</div>
</section>

$(".accordion dd").hide().prev().click(function() {
$(this).parents(".accordion").find("dd").not(this).slideUp().prev().removeClass("active");
$(this).next().not(":visible").slideDown().prev().addClass("active");});