JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Accordion Example
</h1>
<div class="pane">
  <div class="title">
    Thing 1
  </div>
  <div class="content">
    blahblah
  </div>
</div>
<div class="pane">
  <div class="title">
    Thing 2
  </div>
  <div class="content">
    blahblah
  </div>
</div>
<div class="pane">
  <div class="title">
    Thing 3
  </div>
  <div class="content">
    blahblah
  </div>
</div>

CSS

body {
  font-family: sans-serif;
}

.pane {
  width: 100%;
  border-bottom: 1px solid black;
}

.title {
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: grey;
  padding-left: 10px;
}

.title:hover {
  background-color: lightgrey;
}

.content {
  height: 95vh;
  display: none;
  padding: 10px;
}

JavaScript

$('.title').on('click', function() {
  // Save the content and title to vars
  var $title = $(this);
  var $content = $title.next('.content');

  // Slide toggle the one we want
  $content.slideToggle('fast', function() {
    // Once it's done scroll to the title (http://stackoverflow.com/a/6677069/1687909)
    $('html, body').animate({
      scrollTop: $title.offset().top
    }, 200);
  });

  // Slide up all the other ones
  $('.content').not($content).slideUp('fast');
});