JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sh_details">
     <div class="sh_wasserzeichen"></div>
     <article>
       <dl id="sh_accordion">
         <dt id="sh_2016">Headline1</dt>
      <dd><table>
      
         <tr>
             <th>Überschrift1</th>
             <th>Überschrift2</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
             <th>Überschrift3</th>
          </tr>
          <tr>
           <td class="inhalt">Inhalt1</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt3</td>
           <td>Inhalt2</td>
           <td>Inhalt2</td>
          </tr>
          
          <!--Untertabelle1-->
          <tr class="table2">
               <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
                  <th>Sub_Überschrift1</th>
          </tr>
          <tr class="table2">
            <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
           
          </tr>
          
          <tr class="table2">
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
                   <td>Sub_Inhalt1</td>
      ...

CSS

body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}

li, a, dt,table,tr,td,th {transition:all 800ms; -webkit-transition:all 800ms; -moz-transition:all 800ms; -ms-transition:all 800ms; -o-transition:all 800ms;}
#sh_page {position:relative; top:0;left:0;width: 100%; height: 100%;overflow: hidden;}

#sh_details {background-color:#fff;position: relative; top:0;left:0;width:100%; height: 100%; overflow:hidden;flex-direction: column;}
.table2 {display:none;color:white;font-size:11px;background-color:#888;}
.table2_active {background-color:#ff6600; color:white;}
tr,td,th {padding:0.5%;width: 1%; height:auto; margin:auto;}
tr:not(.table2) td:first-child:hover {background-color:#ff6600; color:white;}
table {text-align: left;width: 100%; height: 100%}

.sh_active {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
article  {position:absolute;color: black;width: 100%; height: auto;margin: 0 auto 0 auto;padding-top:75px;padding-left:75px;}
dt, dd {padding:0.5%;width: 90%; height:auto;float: left; margin:0;border-top:1px solid #222;}
dt {font-weight:bold;text-transform: uppercase; background-color:black; color:#ff6600; cursor:pointer;}
dt:first-child {border:none;}
dt:hover {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
dd {background-color:#444; line-height:25px; word-spacing:3px;color:#999; display:none;}

JavaScript

$(document).ready(function(e) {

/********THIS IS NOT WORKING PROPERLY, ALSO SLIDE IS NOT SMOOTH!***********
 ********THIS IS NOT WORKING PROPERLY, ALSO SLIDE IS NOT SMOOTH!***********/
$(".inhalt").stop().click(function(){

   $(this).addClass('table2_active');
   $(this).parents().next('tr').each(function() {
     
        if( $(this).attr('class') === undefined) { return false;}
     else {
     
      $(this).slideDown(300); }
      
    
	});
});
/********THIS IS NOT WORKING PROPERLY, ALSO SLIDE IS NOT SMOOTH!***********
 ********THIS IS NOT WORKING PROPERLY, ALSO SLIDE IS NOT SMOOTH!***********/
 
/********THIS IS WORKING PROPERLY***********
 ********THIS IS WORKING PROPERLY**********/
$('#sh_accordion dt').stop().click(function(){
      
      
      
      if($(this).hasClass('sh_active')) {
         $(this).removeClass('sh_active');
         $(this).next().slideUp(300);
      } else {
         $(this).parent().children().removeClass('sh_active');
         $(this).addClass('sh_active');
            if($(this).next().is('dd')) {
               $(this).parent().children('dd').slideUp(300);
               $(this).next().slideDown(300);
            }
      }
      
      });
/********THIS IS WORKING PROPERLY***********
 ********THIS IS WORKING PROPERLY**********/
});