Steps for designing an HTML table that expands and collapses partially

Question

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples of fully expanding and collapsing tables, I have yet to find one that meets my specific needs.

At the moment, the table is simple, with two columns, headers, and minimal CSS styling and JS functionality. I prefer sticking to plain JS, but I do have access to the JQuery library, although I'm not very experienced with it.

Any assistance you can provide would be greatly appreciated. Thank you in advance!

EDIT

I apologize for what turned out to be a rather simple solution using JQuery, as I am new to it. Upon further exploration of the API documentation, I discovered the :gt() selector which, when combined with toggle(), resulted in an elegant solution that I will share for those who might find it useful.

I applied the "collapse" class to my <tbody> so that the <thead> remained unaffected.

// Hide additional rows upon loading.
$(document).ready(function() {
    $(".collapse").find('tr:gt(19)').hide();
});

// Toggle extra rows on click.
$(".collapse").click(function(){
    $(this).find('tr:gt(19)').toggle();
});

javascript jquery html css html-table

Answer 1

Answer №1

To achieve this, the most straightforward approach is to utilize jQuery and leverage the .toggle() method.

In this demonstration, I have opted to display only the initial 3 results to keep the code concise.

Refer to the comments within the code for a better understanding of its functionality.

$(document).ready(function() {
  $("button#sh").click(function() {
    $("tr.row:nth-child(n+5)").toggle();
  });
});

//In this section, jQuery is set to respond to clicks on the "sh" button. When clicked,
//it alternates between displaying and hiding rows selected by the designated CSS selector,
//which corresponds to the one used for row hiding in the CSS segment.

tr.row:nth-child(n+5) {
  display: none
}
/* This rule ensures that all rows beyond the 4th are initially hidden. With 1 header row
and 3 data rows, totaling 4 visible rows, rows starting from the 5th position will be hidden. */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is being loaded -->

<button id="sh">Show/Hide</button>
<!-- The button responsible for toggling row visibility is defined here. -->

<table border="1">
  <tr class="row">
    <td>Name</td>
    <td>Number</td>
  </tr>
  <tr class="row">
    <td>Name 1</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>Name 2</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>Name 3</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>Name 4</td>
    <td>4</td>
  </tr>
  <tr class="row">
    <td>Name 5</td>
    <td>5</td>
  </tr>
  <tr class="row">
    <td>Name 6</td>
    <td>6</td>
  </tr>
</table>

Answer 2

To achieve this, the most straightforward approach is to utilize jQuery and leverage the .toggle() method.

In this demonstration, I have opted to display only the initial 3 results to keep the code concise.

Refer to the comments within the code for a better understanding of its functionality.

$(document).ready(function() {
  $("button#sh").click(function() {
    $("tr.row:nth-child(n+5)").toggle();
  });
});

//In this section, jQuery is set to respond to clicks on the "sh" button. When clicked,
//it alternates between displaying and hiding rows selected by the designated CSS selector,
//which corresponds to the one used for row hiding in the CSS segment.

tr.row:nth-child(n+5) {
  display: none
}
/* This rule ensures that all rows beyond the 4th are initially hidden. With 1 header row
and 3 data rows, totaling 4 visible rows, rows starting from the 5th position will be hidden. */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is being loaded -->

<button id="sh">Show/Hide</button>
<!-- The button responsible for toggling row visibility is defined here. -->

<table border="1">
  <tr class="row">
    <td>Name</td>
    <td>Number</td>
  </tr>
  <tr class="row">
    <td>Name 1</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>Name 2</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>Name 3</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>Name 4</td>
    <td>4</td>
  </tr>
  <tr class="row">
    <td>Name 5</td>
    <td>5</td>
  </tr>
  <tr class="row">
    <td>Name 6</td>
    <td>6</td>
  </tr>
</table>

Steps for designing an HTML table that expands and collapses partially

Answer №1

Similar questions

Keep your eyes peeled for updates in jquery movements

Looking to create a centered 'ul' using Bootstrap

Determining the size of an image prior to uploading it in a React

Django views are not receiving multiselect data from Ajax requests

Looking to update the location of an element within a canvas using Vue and socket.io?

Understanding the functionality of a notification system

Error occurs when attempting to write to a Node stream after it has already

Sketch a straight path starting from the coordinates x,y at a specified angle and length

A tiny blue spot popping up beside the roster of users

Utilize AJAX or another advanced technology to refine a pre-existing list

Troubleshooting CSS Problems: Issues with background repeating and footer placement

Set up counters for a variety of Owl Carousel sliders

Executing a function in Angular 2 depending on the class assigned to a <div>

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

Is it possible for me to use the name "Date" for my component and still be able to access the built-in "new Date()" functionality?

Discovering relative URLs within an MVC 4 framework

What would be the ideal labels for the parameters within Array.reduce?

Using Express.js with Pug.js, dynamically render the page with new content following a fetch POST request

Tips for creating dynamic alerts using mui v5 Snackbar

Mistakenly appearing at the top of the window instead of the bottom of the window