Home/ Questions/Q 7443751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:22:55+00:00

I’m looking for a way to expand/collapse all table rows at one click. Here

  • 0

I’m looking for a way to expand/collapse all table rows at one click. Here is the code that’s working for me but for one row at a time only.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    <style type="text/css">
    .a {
        border-bottom: 2px solid grey;
    }
    </style>
    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr.a").addClass("odd");
            $("#report tr.b").hide();
            $("#report tr:first-child").show();

            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script> 
</head>
<body>




echo "<table id='report'><caption class='captionpersonal'> All available trainings</caption>";
echo "<tr>";
echo "<th></th><th>Training</th><th>Level</th></tr>";


   echo "</tr><tr class='a'>";  <----------------------------- clicking on row will expand hidden row
   echo "<td><div class='arrow'></div></td>";


   echo "</tr><tr class='b'>"; <-------------------------- row that is hidden


?>
</body>
</html>

I’ve deleted some code so it’s more readable.

So what I would like to achieve is to add a button on TableHead and clicking on it would expand/collapse all table rows – those with class=b.

Any help would much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add a button:

    <button id="click_for_show_all">Show/Hide all</button>

    And then the code to show:

    $('#click_for_show_all').click(function(){
  // see if they are all shown
  var children = $('#report tr.b').length;
  var visibleChildren = $('#report tr.b:visible').length;
  if(children == visibleChildren) { // all the trs are shown
    $('#report tr.b').hide(); // hide all b rows
  }
  else {
    $('#report tr.b').show(); // shows all
  }
});
    • 0