JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div style="width:627px; margin:0 auto;">
    
<table id="internalActivities">
    <colgroup>
        <col width="150px"></col>
        <col width="150px"></col>
        <col width="327px"></col>
    </colgroup>
    <tr>
        <td bgcolor="#ff0000" colspan="2">ewsaidth = 2g50</td>
        <td bgcolor="#00ff00">width = 300</td>
    </tr>
    <tr>
        <td bgcolor="#ff0000">width = 150</td>
        <td bgcolor="#00ff00" colspan="2">width = 400</td>
    </tr>
    <tr>
        <td bgcolor="#ff0000">width = 150</td>
        <td bgcolor="#00ff00" colspan="2">width = 40100</td>
    </tr>
    <tr>
        <td bgcolor="#ff0000">widtsh = 150</td>
        <td bgcolor="#00ff00" colspan="2">width = 400</td>
    </tr>
    <tr>
        <td bgcolor="#ff0000">width = 150</td>
        <td bgcolor="#00ff00" colspan="2">width = 400</td>
    </tr>

</table>

    <div id="seeMoreRecords">See more</div>
    <div id="seeLessRecords">See less</div>
    
    </div>

CSS

#seeMoreRecords, #seeLessRecords {
    background: url('http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/bgPatternWhite.gif');
    width:100%;
    text-align:right;
    border:0;
    display:block;
    padding:5px 25px 5px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#seeMoreRecords:after {
    content: url('http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/downArrow.gif');
    position: relative;
    left:10px;
    top:-1px;
}

#seeLessRecords:after {
    content: url('http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/upArrow.gif');
    position: relative;
    left:10px;
    top:-2px;
}

JavaScript

/*$('#seeMoreRecords').after('<img src="http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/downArrow.gif" class="innerRecords" />');

$('#seeLessRecords').after('<img src="http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/downArrow.gif" class="innerRecords" />');*/


var trs = jQuery("#internalActivities tr");
var btnMore = jQuery("#seeMoreRecords");
var btnLess = jQuery("#seeLessRecords");
var trsLength = trs.length;
var currentIndex = 4;

trs.hide();
trs.slice(0, 4).show(); 
checkButton();

btnMore.click(function (e) { 
    e.preventDefault();
    jQuery("#internalActivities tr").slice(currentIndex, currentIndex + 4).show();
    currentIndex += 4;
    checkButton();
});

btnLess.click(function (e) { 
    e.preventDefault();
    jQuery("#internalActivities tr").slice(currentIndex - 4, currentIndex).hide();          
    currentIndex -= 4;
    checkButton();
});

function checkButton() {
    var currentLength = jQuery("#internalActivities tr:visible").length;
    
    if (currentLength >= trsLength) {
        btnMore.hide();            
    } else {
        btnMore.show();   
    }
    
    if (trsLength > 4 && currentLength > 4) {
        btnLess.show();
    } else {
        btnLess.hide();
    }
    
}