Refine Categories

HTML

<div id="users">
            <input placeholder="Search" class="search" />
            
            <button class="all">All</button>
            <button class="psych">Psych</button>
            <button class="cell">Cell</button>

          <table id="faculty">
            
            <tbody> 
              <tr class="psych">
                <td class="name"> <a href="people_alphabet_faculty_auld.html">Auld, VJ</a></td>
                <td class="number">822-1977</td>
                <td class="born">Glia cell migration, wrapping, gliotactin</td>
                <td> psych </td>
              </tr>
              <tr class="psych">
                <td class="name"><a href="people_alphabet_faculty_Austin.html">Austin, JC</a></td>
                <td class="number">875-2000 x 5943</td>
                <td class="born">Clinical genetics, psychiatric disorders, patient support</td>
                <td>psych</td>
              </tr>
              <tr class="cell">
                <td class="name"><a name="alphab" id="alphab"></a><a href="people_alphabet_faculty_Baimbridge.html">Baimbridge, KG</a></td>
                <td>822-2330</td>
                <td class="born">Calcium function in the CNS (Calbindin &amp; Parvalbumin)</td>
                <td>cell</td>
              </tr>       
            </tbody>
          </table>
            </div>

CSS

ul, #refine-cat, #refine-col {
    float:left;
    width:100%
}

JavaScript

$(document).ready(function(){
  $(".psych").click(function(){
  $("#faculty tbody tr.psych").show();
  $("#faculty tbody tr").not(".psych").hide();
  });
    
  $(".cell").click(function(){
  $(".cell").show();
  $.not(".cell").hide();
  });
});