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;
    border: 1px solid black;
}    
.accordion dt{
      padding: 10px;
}

.accordion dd {
    padding: 10px;
    font-size: 12px;
}

.accordion a {
     display: block;
     color: black;
     font-weight: bold;
     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);