JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <div id="accordion">
         <h3><a href="#">Title 1</a></h3>
    <div>
     Content 1
    </div>
         <h3><a href="#">Title 2 is really really long. Ideally, only a part of title 2 will be displayed here and the remaining text should be displayed when the accordion is expanded</a></h3>
    <div>
     Content 2
    </div>
         <h3><a href="#">Title 3</a></h3>
    <div>
     Content 3
    </div>
    <h3><a href="#">Title 4</a></h3>
    <div>
     Content 4
    </div>
</div>

JavaScript

$(document).ready(function() {
    $("#accordion").accordion();
  });