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>
```
There a few things to say here:

In your JSFiddle you haven't included the link to jQuery, so it doesn't recognize the dollar symbol (as it isn't part of native javascript).
If you do include it, it hides correctly the first row, but if you try to show it, it doesn't work so well. 
This happens because you try to give a `display: block;` to a `<tr>` element, making it behave NOT like a table row.

The solution to this is to only use your .displayNone CSS class, as shown here: <https://jsfiddle.net/wz82w4m3/3/>

EDIT:

To make it "a smooth transition", as you mentioned, you can use the jQuery `.hide()` and `.show()` methods, considering that the integer you pass is the number of milliseconds that the animation runs, as shown here: <https://jsfiddle.net/wz82w4m3/4/>