Expanding Table Rows Display

INFORMATION & CODE

Expanding Table Rows Display

What the Code Does

This code creates an interactive, retro-styled HTML table that functions like an accordion. It displays a list of children with their names and birth order (Peter, Louis, and Stephen). Each main row acts as a clickable button; when clicked, it toggles the visibility of an associated hidden row beneath it. This hidden row expands to reveal detailed biographical or comparative information about that specific child's age relative to the others. The page is styled using custom retro gaming fonts (Google Fonts "Press Start 2P" and "VT323"), colorful gradients, and rounded borders, making the data presentation playful and visually engaging.

How The Code Works

The functionality is split across three standard web technologies:

HTML Structure: The page contains a <table> element with a header ( <th>) and alternating rows (<tr>). The rows containing the children's names are given the class btn, a unique numeric id (0, 1, and 2), and an onclick attribute that triggers a JavaScript function. Directly below each clickable row is a detail row with the class tr and a single table cell (<td>) spanning all four columns (colspan="4").
CSS Styling: The stylesheet centers the table on the viewport using Flexbox. It uses retro font families, linear color gradients, and inner box-shadows to give the table cells a glossy, button-like appearance. Crucially, the CSS sets .tr { visibility: collapse; }, which hides the detail rows by default and ensures they don't take up any layout space until activated. A media query is also included to adjust the sizing for smaller mobile screens.
JavaScript Logic: The script first selects all elements with the .tr class and stores them in a NodeList variable called trow. When a user clicks a child's row, the uncollapse(inc) function is executed, passing the row's ID as an index (inc). The function checks the current visibility of the corresponding detail row. If it is currently "visible" , the script changes it to "collapse" to hide it; otherwise, it changes it to "visible" to reveal the hidden text. Clicking the row again toggles it back closed.

How to Use the Code

To use this code on your own website or local environment, follow these steps:

Set Up Files: Create three separate files in the same folder on your computer: name them index.html, styles.css, and scripts.js.
Paste the Code: Copy the HTML code into index.html, the CSS code into styles.css, and the JavaScript code into scripts.js. (Note: Ensure your local file names match the external links in the HTML <head> and <body> tags).
Run the Page: Open the index.html file in any modern web browser by double- clicking it or dragging it into your browser window.
Customize the Content:
- To change the people listed, edit the text inside the <td> elements in index.html.
- To add more rows, ensure you follow the pattern: create a clickable row (tr) with a sequential id (onclick="uncollapse(this.id)"), followed immediately by a detail row (tr class="tr") containing your expanded text.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding Table Rows Display</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <table>
      <tr>
        <th>Child â„–</th>
        <th>First name</th>
        <th>Middle name</th>
        <th>Surname</th>
      </tr>
      <tr class="btn" id="0" onclick="uncollapse(this.id)">
        <td>1st Child</td>
        <td>Peter</td>
        <td>Thomas</td>
        <td>Griffin</td>
      </tr>
      <tr class="tr">
        <td colspan="4" class="td">Peter is older than Louis by 3 years, 11 months, 13 days. Peter is older than Stephen by 6 years, 9 months, 24 days.</td>
      </tr>
      <tr class="btn" id="1" onclick="uncollapse(this.id)">
        <td>2nd Child</td>
        <td>Louis</td>
        <td>Michael
        <td>Hannant</td>
      </tr>
      <tr class="tr">
        <td colspan="4" class="td">Louis is youger than Peter by 3 years 11 months 13 days. Louis is older than Stephen by 2 years 10 months 13 days.</td>
      </tr>
      <tr class="btn" id="2" onclick="uncollapse(this.id)">
        <td>3rd Child</td>
        <td>Stephen</td>
        <td>David</td>
        <td>wright</td>
      </tr>
      <tr class="tr">
        <td colspan="4" class="td">Stephen is youger than Peter by 6 years 9 months 24 days. Stephen is younger than Louis by 2 years 10 months 13 days.</td>
      </tr>
    </table>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                * {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  font-size: 16px;
  line-height: 1.5;
}
                  
table {
  width: 500px;
  padding: 5px;
  margin: 50px auto 20px;
  background-color: #ffffcc;
  border: 1px solid black;
  border-radius: 25px;
  box-shadow: 3px 3px 15px #333333;
}
@media(max-width: 540px) {
  .table {
    width: 360px;
    font-size: 10px;
  }
}
th {
  padding: 10px;
  background-image: linear-gradient(#00aaff, #aaccff, #0000ff);
  border: 1px solid black;
  border-radius: 25px;
  color: #ffffff;
  box-shadow: inset 0px 0px 10px #0000ff;
}
td {
  padding: 8px;
  background-image: linear-gradient(#aaffaa, #eeffee, #77ff77);
  border: 1px solid black;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: inset 0px 0px 10px #00ff00;
  text-align: center;
}
td:nth-child(1) {
  background-image: linear-gradient(#ee7777, #ffaaaa, #ee0000);
  color: #ffffff;
  box-shadow: inset 0px 0px 10px #ff0000;
  cursor: pointer;
}
.td:nth-child(1) {
  padding: 10px;
  background-image: linear-gradient(#ffff77, #ffffee, #ffffaa);
  color: #000000;
  border-radius: 35px;
  box-shadow: inset 0px 0px 10px #ffff00;
}
.tr {
  visibility: collapse;
}

JAVASCRIPT


                var trow = document.querySelectorAll(".tr");

function uncollapse(inc) {
  if (trow[inc].style.visibility == "visible") {
    trow[inc].style.visibility = "collapse";
  }else{
    trow[inc].style.visibility = "visible";
  }
}

MENU

INFORMATION & CODE