JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="accordion">

<dt><a href="">Panel 1</a></dt>
<dd><a href="http://www.google.com">Google</a></dd>

</dl>

SCSS

.accordion {
   margin: 50px;   
   dt, dd {
      padding: 10px;
      border: 1px solid black;
      border-bottom: 0; 
      &:last-of-type {
        border-bottom: 1px solid black; 
      }
      a {
        display: block;
        color: black;
        font-weight: bold;
      }
   }
  dd {
     border-top: 0; 
     font-size: 12px;
     &:last-of-type {
       border-top: 1px solid white;
       position: relative;
       top: -1px;
     }
  }
}
a {
  text-decoration: none;
}
body {
  font: 16px Sans-Serif;   
}

JavaScript

(function($) {

    var allPanels = $('.accordion > dd').show();

    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        
        if($(this).parent().next().is(':hidden'))
        {
            $(this).parent().next().slideDown();
        }
        
        return false;
    });

})(jQuery);