html5 accordion with query control / CSS

HTML

<article class="accordion">
<section>
  <header><h1>Panel 1</h1></header>
<div class="content">
<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p><p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
  </div>
    </section>
    
    <section>
      <header><h1>Panel 2</h1></header>
<div class="content">  <p>
  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.  </p></div>
    </section>
    
        <section>
          <header><h1>Panel 3</h1></header>
<div class="content">  <p>
  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.  </p></div>
    </section>
  </article>

CSS

body {
  font: 16px/26px"Open Sans", Helvetica Neue, Arial;
  margin: 0;
  padding:20px 0px 0px 0px;
  background:#222222;
}

body article {width:80%;}


.accordion {
  margin: 0 auto;
}

header {  
  cursor:pointer;
  background: #9a305b;
  padding: 5px;
  color: white;
  border-bottom: 1px solid #222222;
transition: background 1.0s ease-in-out;
-moz-transition: background 1.0s ease-in-out;
-webkit-transition: background 1.0s ease-in-out;}

.content{ 
  display: none;
  width:100%;
  color:#333;
  background-color: #f5f5ef;
  }

p {padding:10px}


.selected {
  font-size:200%;
  background: #cd4079
}

JavaScript

(function($) {
    // run the accordion
  var allPanels = $('.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();
      }
 
  });

})(jQuery);