jQuery addClass example

Change class name on click in jQuery

by Manju06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="hide">1</td>
    <td class="hide">2</td>
    <td class="hide">3</td>
  </tr>

CSS

table {
border-collapse:collapse;}

td {
border:solid black 1px;
padding:5px;
cursor:pointer;
transition-duration:1s;}

tr:nth-child(2):not([class]){
display:none ;}

tr td {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

hide {
  
visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
.hide {
 visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s linear;
}

JavaScript

$("td").click(function(){

 $(this).addClass("hide");


  });