Table drawer

by cory a

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table class="table" >
    <thead>
    <tr>
        <th></th>
        <th class='assign rotate'><div><span>header 1 <a ><span class="glyphicon glyphicon-eye-open openThBtn"></span></a></span></div></th>
        <th class="codes drawer rotate" ><div><span>CR 2.1</span></div></th>
        <th class="codes drawer rotate" ><div><span>CR 2.1</span></div></th>
        <th class='assign rotate'  ><div><span>header 1 <a ><span class="glyphicon glyphicon-eye-open openThBtn"></span></a></span></div></th>
        <th class="codes drawer rotate" ><div><span>CR 2.1</span></div></th>
    </tr>
    </thead>
    <tbody>
    <tr class="del">
        <td class="row-header">student</td>
        <td>3 </td>
        <td class="codes drawer" >3</td>
        <td class="codes drawer" >3</td>
        <td >4 </td>
        <td class="codes drawer" >3</td>
    </tr>
    <tr class="del">
        <td>student</td>
        <td>2 </td>
        <td class="codes drawer" >3</td>
        <td class="codes drawer" >3</td>
        <td >2 </td>
        <td class="codes drawer" >3</td>
    </tr>
    
     <tr class="del">
         <td>student</td>
        <td>2 </td>
        <td class="codes drawer" >3</td>
        <td class="codes drawer" >3</td>
        <td >2</td>
         <td class="codes drawer" >3</td>
    </tr>
    </tbody>
</table>

CSS

body {
    padding: 5px;
}
table {
    text-align:center;
    border: 1px solid;
}

.codes {
    display:none;
    border: 1px solid;
    
   
}
.sel {
    background-color:#FFEB99;
    border: 1px solid;
}
.drawer {
    background-color:#F5F5DC;
    
}

JavaScript

$(document).ready(function() {
            
    $(".openThBtn").click(function() { 
        $(this).toggleClass("glyphicon-minus");
        $(this).toggleClass("glyphicon-eye-open");
      var $tr = $(this).closest('tr');
        var indx = $(this).closest('th').index() + 1
        $("td:nth-child("+indx+"), th:nth-child("+indx+")").toggleClass("sel");
        var starti = indx + 1 ;
        var i = starti;
       
        while ($tr.find('th').eq(i).hasClass('codes')) {
         
         i++;
        }
       
       colHide(starti,i);
        
})    ;
        function colHide(starti,i) {
                   
            var $cells;
            var $col;
            for (;starti <= i ; starti++) {
                $("td:nth-child("+starti+"), th:nth-child("+starti+")").toggle("slow");
                }
            }
   
    
 });//end