Неопознанная проблема jquery со списком аккордеона

Question

Я пытаюсь включить аккордеонный список отсюда на простой сайт, но у меня проблема с jquery - javascript требует jquery 2.2.4, но сайт уже имеет jquery -1.11.2.min. Добавление правильной версии jquery без режима конфликта не приводит к работе javascript:

<script type="text/javascript">
var jQuery_2_2_4 = $.noConflict(true);
</script>

Кроме того, добавление режима без конфликта к jquery 1_11_2 приводит к сбою веб-сайта.

Код не работает на веб-сайте (pol - built co uk), но работает здесь отлично даже на jquery 1.11.2 ... Включение другого jquery -1.12.1.min. js в теле не Помогите. Что я должен сделать, чтобы он работал нормально, не падая на сайт? (Я не его владелец или веб-мастер) Есть ли простой способ упростить javascript ниже, чтобы работать без jquery? Я пробовал закрывающий компилятор , но это было бесполезно.

$('.accordion-item .heading').on('click', function(e) {
    e.preventDefault();

    // Add the correct active class
    if($(this).closest('.accordion-item').hasClass('active')) {
        // Remove active classes
        $('.accordion-item').removeClass('active');
    } else {
        // Remove active classes
        $('.accordion-item').removeClass('active');

        // Add the active class
        $(this).closest('.accordion-item').addClass('active');
    }

    // Show the content
    var $content = $(this).next();
    $content.slideToggle(100);
    $('.accordion-item .content').not($content).slideUp('fast');
});

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  padding-top: 50px;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: black;
  width: 690px;
  border-color: #a10900;
  border-width: 50px;
  border-style: solid;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #f9f9f9;
}

.accordion {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 2rem;
}

.accordion-item {
  position: relative;
}
.accordion-item.active .heading {
  color: white;
}
.accordion-item.active .icon {
  background: #a10900;
}
.accordion-item.active .icon:before {
  background: white;
}
.accordion-item.active .icon:after {
  width: 0;
}
.accordion-item .heading {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: lightgrey;
  font-weight: 700;
  font-size: 1rem;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  transition: 0.3s ease-in-out;
}
@media (min-width: 40rem) {
  .accordion-item .heading {
    font-size: 1.2rem;
  }
}
.accordion-item .heading:hover {
  color: white;
}
.accordion-item .heading:hover .icon:before, .accordion-item .heading:hover .icon:after {
  background: white;
}
.accordion-item .icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 3rem;
  height: 3rem;
  border: 2px solid #a10900;
  border-radius: 3px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.accordion-item .icon:before, .accordion-item .icon:after {
  content: '';
  width: 1.25rem;
  height: 0.25rem;
  background: lightgrey;
  position: absolute;
  border-radius: 3px;
  left: 50%;
  top: 50%;
  transition: 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.accordion-item .icon:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}
.accordion-item .content {
  display: none;
  color: #f9f9f9;
}
.accordion-item .content p {
  margin-top: 0;
}
@media (min-width: 40rem) {
  .accordion-item .content {
    line-height: 1.75;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="accordion">
    <div class="accordion-item">
        <a href="#" class="heading">
            <div class="icon"></div>
            <div class="title"> <span style="color:#a10900">Accordion item 1</div>
        </a>
        <div class="content">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</div>