JSFiddle - React, Tailwind, and code Playground

by axl163

HTML

<table>
   <tr>
      <td>
         <div class="headerdiv">
            <a class="link" id="myHeader1" href="javascript:slideonlyone('newboxes1');" >slide this one only</a>
         </div>
         <div class="newboxes" id="newboxes1">Div #1</div>
      </td>
      <td>
         <div class="headerdiv">
            <a class="link" id="myHeader2" href="javascript:slideonlyone('newboxes2');" >slide this one only</a>
         </div>
         <div class="newboxes" id="newboxes2">Div #2</div>
      </td>
      <td>
         <div class="headerdiv">
            <a class="link" id="myHeader3" href="javascript:slideonlyone('newboxes3');" >slide this one only</a>
         </div>
         <div class="newboxes" id="newboxes3">Div #3</div>
      </td>
   </tr>
</table>

CSS

table a {
    text-decoration: none;
}
table a:hover {
    text-decoration: none;
}
.underline {
    text-decoration: underline;        
}
.newboxes {
    border: 1px solid black; 
    background-color: #CCCCCC; 
    display: none;
    padding: 5px;
}
.headerdiv {
    border: 1px solid blue; 
    background-color: #99CCFF; 
    padding: 5px;
}

JavaScript

function slideonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
}

$(document).ready(function() {
    $('table').on('click', 'a.link', function() {
        $('a.link').removeClass('underline');
        $(this).addClass('underline');
    });      
});