Cacher is the code snippet organizer for pro developers

.accordion {
  margin: 0 auto;
}

.accordion header h4 {  
  cursor:pointer;
  background: #9a305b;
  padding: 5px;
  color: white!important;
  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;}

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

.accordion p {padding:10px}


.accordion .selected h4 {
  font-size:150%;
  background: #cd4079
}
/* not mandatory */
.accordion h4:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
  margin: 0 5px;
}

.accordion .selected h4:after {
  content: "\2212";
}

<article class="accordion">
<section>
  <header><h4>Panel 1</h4></header>
<div class="content">
  <p>Lorem ipsum dolor sit amet, rebum detraxit et usu, vix ea quaeque maiestatis. Ut movet facilisis rationibus has, mucius noster possit mei eu. Essent platonem pertinacia cu vel, facilisi pericula principes sed ad. Vocibus adolescens eu cum. Est te justo explicari, vix accusam detraxit conceptam ei.</p>

<p>Quo congue appareat in. Cu omnes regione vix, at quo voluptatum argumentum, diam pertinacia complectitur pro in. Sea at autem doctus, ea tollit semper instructior sea. Ius et idque nonumes comprehensam.</p>

<p>Mei eu fabulas albucius splendide, et veri eligendi eloquentiam vix. Ea vix sumo nostro epicurei. Atqui nobis delicata ei ius, vero scripta sea no. Malorum placerat dignissim no duo.</p>

<p>Discere eruditi vel cu, ne sed idque atqui. Quodsi labitur democritum ne nec, ut qui ubique tractatos. Nihil gloriatur omittantur ei his, nam ei soluta vocibus. Liber ornatus ei sed, mei cu utroque officiis nominati. Omnesque oporteat disputationi id eam. Vel id zril insolens cotidieque.</p>

  <p>Nibh volumus lucilius vix in. Assum adolescens ad mei, has aeque partem signiferumque in. Vis ne posse vocibus. His vocibus conclusionemque in.</p>
  </div>
    </section>
    
    <section>
      <header class="selected"><h4>Panel 2</h4></header>
<div class="content active"> <p>Mei eu fabulas albucius splendide, et veri eligendi eloquentiam vix. Ea vix sumo nostro epicurei. Atqui nobis delicata ei ius, vero scripta sea no. Malorum placerat dignissim no duo.</p>

<p>Discere eruditi vel cu, ne sed idque atqui. Quodsi labitur democritum ne nec, ut qui ubique tractatos. Nihil gloriatur omittantur ei his, nam ei soluta vocibus. Liber ornatus ei sed, mei cu utroque officiis nominati. Omnesque oporteat disputationi id eam. Vel id zril insolens cotidieque.</p></div>
    </section>
    
        <section>
          <header><h4>Panel 3</h4></header>
<div class="content">  <p>Quo congue appareat in. Cu omnes regione vix, at quo voluptatum argumentum, diam pertinacia complectitur pro in. Sea at autem doctus, ea tollit semper instructior sea. Ius et idque nonumes comprehensam.</p>

<p>Mei eu fabulas albucius splendide, et veri eligendi eloquentiam vix. Ea vix sumo nostro epicurei. Atqui nobis delicata ei ius, vero scripta sea no. Malorum placerat dignissim no duo.</p>

<p>Discere eruditi vel cu, ne sed idque atqui. Quodsi labitur democritum ne nec, ut qui ubique tractatos. Nihil gloriatur omittantur ei his, nam ei soluta vocibus. Liber ornatus ei sed, mei cu utroque officiis nominati. Omnesque oporteat disputationi id eam. Vel id zril insolens cotidieque.</p>
</div>
    </section>
  </article>

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

})(jQuery);