Question: I have a table with many rows, ideally i would want to show row (tr) with a specific class and hide all other tr.
All the tr have unique class assigned.

I have tried it using the below in CSS

```
.displayNone{
    display:none;
}

.displayBlock{
    display:block;
}

```

And then from js adding and removing class but does not work.

Js Fiddle: <https://jsfiddle.net/SujitJ/wz82w4m3/1/>

Also it should be a smooth transition. Please help!

Answer: 
Please try this.

```js
$('#1').click(function() {
    $('.111A').hide();
}); 

$('#2').click(function() {
    $('.111A').show();
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableContent">
  <thead>
    <tr>
      <th class="col1">RoleName</th>
      <th class="col2">ReadOnly</th>
      <th class="col3">Modify</th>  
      <th class="col4">Approve</th>
    </tr>
  </thead>
  <tbody> 
    <tr class="111A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>      
    </tr>
    <tr class="222A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>      
    </tr> 
  </tbody>
</table>

<button id="1">addNone</button>
<button id="2">addBlock</button>
```
Your code is right and will work only if you use the "jquery.min.js" file which handles the 'click' event.