CODEWITHSUNDEEP
javascriptjquery
Peter Parker
Peter Parker

Reputation: 91

show more or less when clicking on button

could someone help me with this block of code please.

I have a table that usually comes with more than 5 rows.

I want to show only 5 when loading the page, and when clicking on "SHOW MORE" show the rest, when clicking on "SHOW LESS" show only 5.

SHOW MORE and SHOW LESS must be the same button

Can someone help me. I started using Jquery, but I wanted to use pure JS

$("[id*='trid'] > tr").each(function(index) {
  if (index >= 5) {
    $(this).hide();
  }
});

function mostrarRegistros() {
  $("[id*='trid'] > tr").each(function(index) {
    $(this).show();
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tbody id="trid">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John 3</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 4</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 5</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 6</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<br />
<br />
<br />

<button type="button" onclick="mostrarRegistros()">Show More/ Show Less</button>

Upvotes: 1

Views: 2054

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

And this is a solution from me on jquery, using the pseudo-classes :visble, which determines the visible tags of the tr, as well as the lt() selector to determine the minimum value of the rows in the table.

Also in my example, the button changes the text depending on the need to hide or show the text:

$('button').text('Show More');

and

$('button').text('Show Less');


$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');

function mostrarRegistros() {
  if ($('#trid tr:visible').length <= 5) {
    $('#trid tr').show();
    $('button').text('Show Less');
  } else {
    $('#trid tr').hide();
    $('#trid tr:lt(5)').show();
    $('button').text('Show More');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tbody id="trid">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John 3</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 4</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 5</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 6</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<br />
<br />
<br />

<button type="button" onclick="mostrarRegistros()"></button>

Upvotes: 0

Lawrence Cherone
Lawrence Cherone

Reputation: 46610

Here is a solution using vanilla js, its one way to do it but could do it differently like attach the button dynamically which would simplify it abit.

If you have multiple tables use a class to define that the table should have reveal functionality, then grab all tables and pass in the element to a function which provides the functionality, then return the set of methods which can call on the buttons, using an id as an identifier.

const tableReveal = function(elm, options) {
  // merge options
  options = Object.assign({}, {
    limit: 3
  }, options)

  // the tr's
  let trs = elm.querySelectorAll('tbody tr')

  // shown state
  let shown

  // funcs
  const hide = () => {
    trs.forEach((tr, index) => index >= options.limit ? tr.style.display = 'none' : '')
    shown = false
  }

  const show = () => {
    trs.forEach((tr) => tr.style.display = 'table-row')
    shown = true
  }

  // initial state
  hide()

  // reveal funcs
  return {
    toggle: () => shown ? hide() : show(),
    hide,
    show
  }
}

/**
 * Usage:
 * - For each over every table-reveal class, init reveal func and pass in element + options, return and assign table[id] for button
 */
let table = {}
document.querySelectorAll('.table-reveal').forEach(el => table[el.getAttribute('id')] = tableReveal(el, {
  limit: 5
}))
<table style="width:100%" class="table-reveal" id="table-reveal-1">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John 3</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 4</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 5</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 6</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<button type="button" onclick="table['table-reveal-1'].toggle()">Show More / Show Less</button>

<table style="width:100%" class="table-reveal" id="table-reveal-2">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John 3</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 4</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 5</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>John 6</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<button type="button" onclick="table['table-reveal-2'].toggle()">Show More / Show Less</button>

Upvotes: 1

Related Questions