JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
    <dl>
      <dt>One</dt>

      <dd>
        <ul>
          <li>a</li>

          <li>b</li>

          <li>c</li>
        </ul>
      </dd>

      <dt>Two</dt>

      <dd>
        <ul>
          <li>a</li>

          <li>b</li>

          <li>c</li>
        </ul>
      </dd>

      <dt>Three</dt>

      <dd>
        <ul>
          <li>a</li>

          <li>b</li>

          <li>c</li>
        </ul>
      </dd>
    </dl>
  </div>

CSS

#accordion{
 width : 200px;   
}
dt{
  cursor : pointer;
  background-color: #EFEFEF;
}
dd{
  cursor : pointer;
}
li{
  background-color:#CCCCCC;
  list-style: none;
}

JavaScript

$(function(){
  $("dd").hide();
  $("dt").click(function(){
    $(this).next().slideDown().siblings("dd").slideUp();
  });
});