Show/Hide table rows

by karin

HTML

<div id="btnHolder"></div>
<table class="companyDrugTable" border="1">
    <thead>
        <tr>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
            <th>thead</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>td</td>
            <td>td</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>td</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>td</td>
            <td></td>
            <td>td</td>
        </tr>
    </tbody>
</table>

CSS

.more::after {
    content:"more";
}
.less::after {
     content:"less";
}

JavaScript

var noOfTableColumns = $(".companyDrugTable").find("tbody tr:first td").length;
var hiddenCols = noOfTableColumns - 3;

if(noOfTableColumns>4){
     $('<a class="btn-sml moreless more"></a>').appendTo('#btnHolder');
    
     //hide
    $('.companyDrugTable td:nth-child(n+2):nth-child(-n+'+hiddenCols+'),.companyDrugTable th:nth-child(n+2):nth-child(-n+'+hiddenCols+')').hide();
       
     //toggle
        $('.moreless').on('click', function () {
         //toggle class
            $('.more, .less').toggleClass("more less");
			$('.companyDrugTable td:nth-child(n+2):nth-child(-n+'+hiddenCols+'),.companyDrugTable th:nth-child(n+2):nth-child(-n+'+hiddenCols+')').toggle();
        });
}