Click a button to display hidden rows

Question

I would like to ask will it be possible that I have a table like this: JsFiddle

Expected result with Product BCD hidden:

<table>
  <th>
     Product Detail Display
  </th>
  <tr>
     <td> ----- Product A -----</td>
  </tr>
  <tr>
     <td>
       <div class="left">Total: 4 Product(s)</div>
       <div class="right"><button>View More Products</button></div>
     </td>
  </tr>
</table>

I want it initially will only display "Product A", and "Product B,C,D" will be three hidden rows. Until I click on the button "View More Products", the rows for "Product B,C,D" will be displayed. And the button will become "View Fewer Products" while the "Product B,C,D" will be hidden again...

I am not quite familiar with the table attribute such that I would like to ask whether it will be possible to do so? I am not sure the <td> attribute can deal with this... Or actually it will be better to use <div> and jQuery to control this action?

score 1 · Answer 1 · answered Jun 17 '17 at 19:12

Using CSS and jQuery you modify the $.text() of the button and on click add a class to the table that toggles the state and use CSS to hide/show the rows.

var $table = $('table'),
  $button = $('button');
$button.on('click',function() {
 if ($table.hasClass('more')) {
   $table.removeClass('more');
   $(this).text($(this).data('more'));
  } else {
   $table.addClass('more');
   $(this).text($(this).data('less'));
  }
})

td{
  text-align:center;
}

.left{
  width:50%;
  float:left;
}

.right{
  width:50%;
  float:right;
  text-align: right;
}

tr:nth-child(n + 3):not(:last-child) {
  display: none;
}

.more tr:nth-child(n + 3):not(:last-child) {
  display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <th>
    Product Detail Display
  </th>
  </tr>
  <tr>
    <td> ----- Product A -----</td>
  </tr>
    <tr>
    <td> ----- Product B ----- </td>
  </tr>
    <tr>
    <td> ----- Product C ----- </td>
  </tr>
    <tr>
    <td> ----- Product D ----- </td>
  </tr>
  <tr>
    <td>
      <div class="left">Total: 4 Product(s)</div>
      <div class="right"><button data-less="View Less Products" data-more="View More Products">View More Products</button></div>
    </td>
  </tr>
</table>

Thanks! It's Working! Such a good and advanced reference for me! Thank you! — Sammi, Jun 18 '17 at 04:56
@Sammi you're welcome :) I'm curious why you chose the other answer as the solution? IMO it isn't as good of a solution, but if it worked better for you, do you mind telling me why? Just out of curiosity so I know going forward when I'm helping people - not encouraging you to choose my solution or anything like that. — Michael Coker, Jun 18 '17 at 19:20

score 1 · Accepted Answer · answered Jun 17 '17 at 19:22

1

I updated your jsfiddle https://jsfiddle.net/6xfdez2x/1/

Use a class to hide rows

$('#more').on('click',function(){
    $("#tbl tr.occult").show();
  $(this).hide();
  $('#less').show();
});

$('#less').on('click',function(){
    $("#tbl tr.occult").hide();
  $(this).hide();
  $('#more').show();
});

answered Jun 17 '17 at 19:22

Diana Ysabel

106
11

Thanks! It's working! May I ask what is the usage of adding the 'integrity' and 'crossorigin' when we are calling the script file? – Sammi Jun 18 '17 at 04:56
I forgot to remove them when I copied the source of jquery, this article explains about them https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attribute – Diana Ysabel Jun 20 '17 at 17:26

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I am not quite familiar with the table attribute such that I would like to ask whether it will be possible to do so? I am not sure the <td> attribute can deal with this.

You don't need to use the HTML <table> element . According to MDN:

HTML tables should be used for tabular data — this is what they are designed for.

Or actually it will be better to use <div> and jQuery to control this action?

As a general rule, don't use jQuery when you can easily do something with plain JavaScript:

document.querySelector('button').addEventListener('click', function() {
  if (this.textContent == 'View More Products') {
    this.textContent = 'View Fewer Products';
  } else {
    this.textContent = 'View More Products';
  }
  document.querySelector('div').classList.toggle('hidden');
});

.hidden {
  display: none;
}

<h1>Product Detail Display</h1>
<p> ----- Product A ----- </p>
<div class="hidden">
  <p> ----- Product B ----- </p>
  <p> ----- Product C ----- </p>
  <p> ----- Product D ----- </p>
</div>
<p>Total: 4 Product(s) <button>View More Products</button></p>

Click a button to display hidden rows

3 Answers3