Hiding and Showing dynamically generated table rows with help of a single button

Question

I have a table generated with dynamic data in a WordPress Section with a custom requirement where the "table rows greater than 3 should be hidden by default. And function which should toggle show more rows or show fewer table rows with one button. But however, I have achieved it with two different functions. I need help in cascading these two functions with a single button.

Like a button below the table which shows "Show More" once clicked all the dynamic table rows will be displayed. And the same button should show "Show less" after it's clicked and hide back to the default state.

I know for the fact the script is very tiresome on the server, any alternatives would be much appreciated!

<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
            <thead>
            <tr> 
                <th><strong>Floor Plan</strong></th>
                <th><strong>Dimension</strong></th>
                <th><strong>Price</strong></th>
            </tr>
            </thead>
            <tbody>
            <?php 
            
           
function RemoveSpecialChar($str)
{
     $res = str_replace( array( '\'', '"',
    ',' , ';', '<', 'West', 'Floor Plan', '>' , '-' ), ' ', $str);
    return $res;
}


            
        foreach( $floor_plans as $plans ) { $i++; 
       
        if($plans['fave_plan_title'] == "Master Plan"){
            break;
        }
        
        ?>
                        <tr id="<?php echo $i;?>" class="<?php echo $i;?>">
         
         <td> <a href="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" data-lightbox="roadtrip">
      <img class="borderr" src="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" alt="<?php echo $plans['fave_plan_description']; ?>" width="100" height="100" title="<?php echo $plans['fave_plan_description']; ?>">
          </a></td>
         
         <td>
             
           <?php 
           
            $str=ltrim(chop($plans['fave_plan_description'],"Floor Plan"), get_the_title());
           
            $str1 = RemoveSpecialChar($str);
            echo $str1;
           
           ?> <br>
           <b><?php echo esc_attr( $plans['fave_plan_size'] ); ?> Sqft</b>
           
           </td>
         
               <td><button class="btn btn-primary">Get Quote</button></td>
            </tr>
            
            <?php } ?>
            </tbody>
        </table> <br>
                    <div class="wrapperr">
                    <button class="btn btn-primary" onclick="show()">Show All <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
                    <button class="btn btn-primary" onclick="hide()">Show Less <i class="fa fa-arrow-up" style="font-size:14px"></i></button>
                    </div>
        </div><!-- block-content-wrap -->
    </div><!-- block-wrap -->
</div><!-- property-floor-plans-wrap -->
<?php } ?>

JavaScript:

<script>
    
    document.getElementById('4').style.display = 'none';
    document.getElementById('5').style.display = 'none';
    document.getElementById('6').style.display = 'none';
    document.getElementById('7').style.display = 'none';
    document.getElementById('8').style.display = 'none';
    document.getElementById('9').style.display = 'none';
    document.getElementById('10').style.display = 'none';
    document.getElementById('11').style.display = 'none';
    document.getElementById('12').style.display = 'none';
    document.getElementById('13').style.display = 'none';
    document.getElementById('14').style.display = 'none';
    document.getElementById('15').style.display = 'none';
    document.getElementById('16').style.display = 'none';
    document.getElementById('17').style.display = 'none';
    document.getElementById('18').style.display = 'none';
    document.getElementById('19').style.display = 'none';
    document.getElementById('20').style.display = 'none';


function hide() {

    document.getElementById('4').style.display = 'none';
    document.getElementById('5').style.display = 'none';
    document.getElementById('6').style.display = 'none';
    document.getElementById('7').style.display = 'none';
    document.getElementById('8').style.display = 'none';
    document.getElementById('9').style.display = 'none';
    document.getElementById('10').style.display = 'none';
    document.getElementById('11').style.display = 'none';
    document.getElementById('12').style.display = 'none';
    document.getElementById('13').style.display = 'none';
    document.getElementById('14').style.display = 'none';
    document.getElementById('15').style.display = 'none';
    document.getElementById('16').style.display = 'none';
    document.getElementById('17').style.display = 'none';
    document.getElementById('18').style.display = 'none';
    document.getElementById('19').style.display = 'none';
    document.getElementById('20').style.display = 'none';
}

  function show() {
  
  var a = document.getElementById("4");
  var b = document.getElementById("5");
  var c = document.getElementById("6");
  var d = document.getElementById("7");
  var e = document.getElementById("8");
  var f = document.getElementById("9");
  var g = document.getElementById("10");
  var h = document.getElementById("11");
  var i = document.getElementById("12");
  var j = document.getElementById("13");
  var k = document.getElementById("14");
  var l = document.getElementById("15");
  var m = document.getElementById("16");
  var n = document.getElementById("17");
  var o = document.getElementById("18");
  var p = document.getElementById("19");
  var q = document.getElementById("20");
    
    a.style.display = "";
    b.style.display = "";
    c.style.display = "";
    d.style.display = "";
    e.style.display = "";
    f.style.display = "";
    g.style.display = "";
    h.style.display = "";
    i.style.display = "";
    j.style.display = "";
    k.style.display = "";
    l.style.display = "";
    m.style.display = "";
    n.style.display = "";
    o.style.display = "";
    p.style.display = "";
    q.style.display = "";
}  
</script>

A working example of the same can be seen in the below-mentioned link, look for the floor plan section : https://doorsandshelters.com/property/sowparnika-indraprastha-2/

Answer 1

You need to handle it why client-side scripts only. A better solution may be using jquery greater than selector

html
<button class="btn btn-primary" onclick="toggle(event)">Show More<i class="fa fa-arrow-down" style="font-size:14px"></i></button> 

javascript

var shown = false;
function toggle(e){
if(shown){
jQuery("tr:gt(3)").hide()
e.target.innerText('Show more')
}else{
jQuery("tr:gt(3)").show()
e.target.innerText('Show less')
}
}

Answer 2

Taken from @gaurav arora's answer, a more clean & maintainable approach.

Instead of having 2 buttons and different onClick handlers, just use a single button and with a jquery function toggle the rows and the button text. Having 2 buttons would be buggy.

HTML:

<button class="btn btn-primary toggleFloorPlans">Show more <i class="fa fa-arrow-down" style="font-size:14px"></i></button>

JQuery should go at the very bottom of your file:

<script>
let shown = false;
$(document).ready(function(){
    $(".toggleFloorPlans").click(function(){
        var thisEl = $(".toggleFloorPlans"); 
        if(shown){
            jQuery("tr:gt(3)").hide()
            thisEl.text('Show more')
            shown = false;
        } else {
            jQuery("tr:gt(3)").show();
            thisEl.text('Show less')
            shown = true;
        }
    });
});
</script>

I've used this jquery CDN, replace this with yours and should be good to work.

This should be above the jquery function above.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

---

Update: Show up/down arrow

<script>
let shown = false;
$(document).ready(function(){
    $(".toggleFloorPlans").click(function(){
        var thisEl = $(".toggleFloorPlans"); 
        if(shown){
            jQuery("tr:gt(3)").hide()
            thisEl.text(`Show more`)
            thisEl.append('<i class="fa fa-arrow-down" style="font-size:14px"></i>');
            shown = false;
        } else {
            jQuery("tr:gt(3)").show();
            thisEl.text('Show less');
            thisEl.append('<i class="fa fa-arrow-up" style="font-size:14px"></i>');
            shown = true;
        }
    });
});
</script>