jQuery table view more/less functionality

Question

jQuery

I need to show all table row on click of view more and after showing all need to change the button text to view less and after clicking on view less table go to it's default state and change the button text to view more. same functionality repeats again.

        $('table tr:lt(4)').addClass('active');
        var rowCount = $('table tr').length;
        $('a.load_more').on('click', function(e) {
            e.preventDefault();  
            var $rows = $('table tr');
            var lastActiveIndex = $rows.filter('.active:last').index();
            $rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').addClass('active');
            if ($rows.filter(':hidden').length === 0) {
                $(this).html('view less').on('click', function () {
                    $rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').removeClass('active');
                    $('table tr:lt(4)').addClass('active');
                });
            }
             
        });

**CSS**
table tr { display: none; }
table tr.active { display: table-row; }

HTML this is HTML Table need to perform functionality

<table>
        <thead>
            <th>head 1</th>
            <th>head 2</th>
            <th>head 3</th>
            <th>head 4</th>
        </thead>
            <tbody>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                    <td>content</td>
                </tr>
                <tr>
                    <td>last row</td>
                    <td>last row</td>
                    <td>last row</td>
                    <td>last row</td>
                </tr>
            </tbody>
    </table>
    <a href="#" class="load_more">View More</a>

Answer 1

You can simply remove active class from all trs when $rows.filter(':hidden').length is 0 and add active to only first 4 trs else add active class to other trs as well.

Demo Code :

 $('table tr:lt(4)').addClass('active'); var rowCount = $('table tr').length; $('a.load_more').on('click', function(e) { e.preventDefault(); var $rows = $('table tr'); var lastActiveIndex = $rows.filter('.active:last').index(); if ($rows.filter(':hidden').length === 0) { $rows.removeClass('active') //remove all active $(this).html('View More') //change html $('table tr:lt(4)').addClass('active'); //add class } else { $(this).html('view less') $rows.filter(':lt(' + (lastActiveIndex + rowCount) + ')').addClass('active'); } });

 table tr { display: none; } table tr.active { display: table-row; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <th>head 1</th> <th>head 2</th> <th>head 3</th> <th>head 4</th> </thead> <tbody> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>last row</td> <td>last row</td> <td>last row</td> <td>last row</td> </tr> </tbody> </table> <a href="#" class="load_more">View More</a>

Answer 2

Here is a simpler solution with the use of a flip flop statement

 var originalLength = 4; // orginal length = 4 $('table tr:lt(' + originalLength + ')').addClass('active'); var rowCount = $('table tr').length; var hidden = true; var $table = $('table').find('tbody'); $('a.load_more').on('click', function(e) { e.preventDefault(); if (hidden) { // first on click, it is hidden, so expand $table.find('tr:lt(' + rowCount + ')').hide(); $table.find('tr:lt(' + rowCount + ')').show(); $(this).html('View less') //change html } else { $table.find('tr:lt(' + rowCount + ')').hide(); $table.find('tr:lt(' + (originalLength - 1) + ')').show(); $(this).html('View More') //change html } hidden =;hidden; });

 table tr { display: none; } table tr.active { display: table-row; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <th>head 1</th> <th>head 2</th> <th>head 3</th> <th>head 4</th> </thead> <tbody> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>last row</td> <td>last row</td> <td>last row</td> <td>last row</td> </tr> </tbody> </table> <a href="#" class="load_more">View More</a>