JSFiddle - React, Tailwind, and code Playground

HTML

<section id="experts" class="accordion-item">
  <h1><a href="#experts">Experts</a></h1>
  <div class="content">
      Cillum vegan sunt, artisan brooklyn shoreditch minim ea sartorial freegan eiusmod readymade keffiyeh nihil. Thundercats brunch vegan quis fanny pack, synth food truck salvia farm-to-table. Do in vinyl portland. Lomo cupidatat consequat sunt mustache. Cred squid nisi aesthetic, lo-fi echo park mustache brooklyn mixtape. Lo-fi anim sunt ullamco incididunt vinyl, sartorial ethical ea vice enim chambray butcher. Pitchfork enim culpa fixie, keytar locavore labore retro raw denim sartorial iphone salvia irony messenger bag.
  </div>
</section>

<section id="pros" class="accordion-item">
  <h1><a href="#pros">Pros</a></h1>
  <div class="content">
      Cillum vegan sunt, artisan brooklyn shoreditch minim ea sartorial freegan eiusmod readymade keffiyeh nihil. Thundercats brunch vegan quis fanny pack, synth food truck salvia farm-to-table. Do in vinyl portland. Lomo cupidatat consequat sunt mustache. Cred squid nisi aesthetic, lo-fi echo park mustache brooklyn mixtape. Lo-fi anim sunt ullamco incididunt vinyl, sartorial ethical ea vice enim chambray butcher. Pitchfork enim culpa fixie, keytar locavore labore retro raw denim sartorial iphone salvia irony messenger bag.
  </div>
</section>
<section id="jape" class="accordion-item">
  <h1><a href="#jape">jape</a></h1>
  <div class="content">
      Cillum vegan sunt, artisan brooklyn shoreditch minim ea sartorial freegan eiusmod readymade keffiyeh nihil. Thundercats brunch vegan quis fanny pack, synth food truck salvia farm-to-table. Do in vinyl portland. Lomo cupidatat consequat sunt mustache. Cred squid nisi aesthetic, lo-fi echo park mustache brooklyn mixtape. Lo-fi anim sunt ullamco incididunt vinyl, sartorial ethical ea vice enim chambray butcher. Pitchfork enim culpa fixie, keytar locavore labore retro raw denim sartorial iphone salvia irony messenger bag.
  </div>
</section>

CSS

.accordion-item h1 a {
    display: block;
    font-size: 1.5em;
    text-align: center;
    color: #777;
    text-shadow: 0 1px 0 #555, 0 -1px 0 #fff;
    text-decoration: none;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom-color: #bbb;
    padding: 5px 10px;
    box-shadow: inset 0 -3px 5px -3px rgba(0,0,0,.3);
}
.accordion-item h1 a:hover,
.accordion-item h1 a:active,
.accordion-item.current h1 a {
    background: #eee;
    border-color: #bbb;
    border-bottom-color: #888;
}

.accordion-item .content {
    display: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #aaa;
    padding: 10px;
}

:target .content {
    display: block;
}

JavaScript

// First one is active 
$('.accordion-item').eq(0).addClass('current').find('.content').show();
    
// Listen to click on headline-link
$('.accordion-item h1 a').click(function(e) {
  // prevent auto scrolling to id
  e.preventDefault();
  
  // Register the variables for better performance
  var $parent = $(this).closest('.accordion-item'),
      $content = $parent.find('.content');

  // If the clicked section is not the active one
  if (!$parent.hasClass('current')) {

    // SlideUp "old" and remove class
    $('.accordion-item.current .content').slideUp()
      .parent().removeClass('current');
    
    // Add class and slide down content
    $parent.addClass('current');
    $content.slideDown();
  
  // If the click was triggered on the currently active section
  // remove the class and slide up content
  } else {
    $parent.removeClass('current');
    $content.slideUp();
  }
});