JSFiddle - React, Tailwind, and code Playground

by John Dow

HTML

<div style="height:200px;position:relative">

<div id="accordion">

        <h3 data-id="57">Jan 12 2016 14:58:13</h3>
        <div>
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="accordianBoldLeft">Pause</td>
                <td class="accordianBoldRight">58/58</td>
              </tr>
              <tr>
                <td class="accordianNormLeft" colspan="2">Keypress</td>
              </tr>
              <tr>
                <td class="accordianNormLeft">Measurement</td>
                <td class="accordianNormRight">14</td>
              </tr>
            </tbody>
          </table>
        </div>
        <h3 data-id="56">Jan 12 2016 14:58:11</h3>
        <div>
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="accordianBoldLeft">Resume</td>
                <td class="accordianBoldRight">57/58</td>
              </tr>
              <tr>
                <td class="accordianNormLeft" colspan="2">Keypress</td>
              </tr>
              <tr>
                <td class="accordianNormLeft">Measurement</td>
                <td class="accordianNormRight">14</td>
              </tr>
            </tbody>
          </table>
        </div>
        <h3 data-id="55">Jan 12 2016 14:58:09</h3>
        <div>
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="accordianBoldLeft">Pause</td>
                <td class="accordianBoldRight">56/58</td>
              </tr>
              <tr>
                <td class="accordianNormLeft" colspan="2">Keypress</td>
              </tr>
              <tr>
                <td class="accordianNormLeft">Measurement</td>
                <td class="accordianNormRight">13</td>
              </tr>
            </tbody>
          </table>
        </div>
        <h3 data-id="54">Jan 12 2016 14:58:07</h3>
       ...

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
#accordion {
  position:absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
	width: 300px;
  overflow-y:scroll;
}

JavaScript

$(function() {
	$( "#accordion" ).accordion({
		heightStyle: "content",
		collapsible: true,
		active: false, 
		activate: function( event, ui ) {
			if(!$.isEmptyObject(ui.newHeader.offset())) {
				//$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top-40 }, 0);
        $('#accordion').scrollTop(ui.newHeader.offset().top-21);
			}
		}
	});

});