Jquery not working in Chrome, and not as expected in Safari and Firefox

Question

Chrome 55.0, Firefox 50.1.0, Safari 10.0.2

Wordpress 4.7.1, Dynamik-Gen 2.0

http://codepen.io/grantsmith/pen/WROPXr

HTML

<article class="accordion">
 <section>
  <header><h5>When will I get my race pack with number and timing chip?</h5></header>
  <div class="accord-content"><p>You will get your race pack in the post around 2 weeks before the race.</p>
  </div>
 </section>
 <section>
  <header><h5>Is the course totally closed to traffic?</h5></header>
   <div class="accord-content"><p>Yes, the Course is completely closed roads, so no cars or pedestrians will be allowed on the run course. The town centre finish will be fenced from Regents circus right down to the finish line. There will be ample space on both sides of the fenced area for spectators and pedestrians on both sides.</p>
   </div>
 </section>

CSS

.accordion {
  margin: 0 auto;
}
.accordion header {
  cursor:pointer;
  background: #004B92;
  padding: 18px;
  border-bottom: 1px solid #00256C;
  transition: background 1.0s ease-in-out;
  -moz-transition: background 1.0s ease-in-out;
  -webkit-transition: background 1.0s ease-in-out;
}
.accordion header h5 {
  font-weight: 300!important;
  font-size: 1.8rem!important;  
  color: white!important;
  text-align: center;
  margin-bottom: 0!important;
}
.accordion .accord-content { 
  display: none;
  width:100%;
  color: #00256C;
  background-color: #fff;
  box-sizing: border-box;
}
.accord-content p {
  text-align:  center;
  padding:18px;
}
.accord-content .selected h5 {
  background: #00256C;
}
.accordion h5:after {
 content: '\002B';
 color: #fff;
 font-weight: bold;
 float: right;
 margin: 0 5px;
}
.accordion .selected h5:after {
  content: "\2212";
}

jQuery:

jQuery(document).ready (function($) {
    // run the accordion
  var allPanels = $('.accord-content').hide();
  var heads = $('.accordion header');
  $('header').on('click', function() {
      $this = $(this);
      $target =  $this.parent().find('div');
      if(!$target.hasClass('active')){
      heads.removeClass('selected');
      $(this).addClass('selected');
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
      $('html, body').animate({scrollTop: $($target).offset().top}, 50);
      }

  });

}) (jQuery);

Hi, it should be pointed out that I know nothing about Jquery, as will most likely become very obvious!

I am trying to build an accordion for a WordPress page, http://www.newswindonhalf.co.uk/half-marathon/faqs/ . The code above in codepen works fine whilst there. Once placed into WordPress / Dynamik, it no longer works as per codepen.

Issue 1: Get it working on all browsers

Issue 2: Remove the scrolling, as it currently leaves the page view

Many thanks

Answer 1

$(document).ready (function() {
    // run the accordion
  var allPanels = $('.accord-content').hide();
  var heads = $('.accordion header');
  $('header').on('click', function() {
      $this = $(this);
      $target =  $this.parent().find('div');
      if(!$target.hasClass('active')){
      heads.removeClass('selected');
      $(this).addClass('selected');
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
      $('html, body').animate({scrollTop: $($target).offset().top}, 50);
      }

  });

}) 

Answer 2

I would have written it this way:

jQuery(document).ready(function() {
    // run the accordion
  var allPanels = jQuery('.accord-content').hide();
  var heads = jQuery('.accordion header');
  jQuery(heads).on('click', function() {
      $this = jQuery(this);
      $target =  $this.parent().find('div.accord-content');
      if(!$target.hasClass('active')){
          heads.removeClass('selected');
          $this.addClass('selected');
          allPanels.removeClass('active').slideUp();
          $target.addClass('active').slideDown();
          jQuery('html, body').animate({scrollTop: $target.offset().top}, 50);
      }
  });
});