How to make expandable table cells hidden by default using jQuery/JavaScript, and click-able outside of a label?

user_13430381 0
Viewed 86

I have this short piece of code that allows for sections of a table to be collapsed (they are like collapsible headers). This is neat, but I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?

My present code, shown below, also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?

table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
}

[data-toggle="toggle"] {
  display: none;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tbody class="labels">
      <tr>
        <td colspan="2">
          <label for="section">Click me!</label>
          <input type="checkbox" id="section" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Jack</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>300</td>
      </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function() {
      $(this).parents().next('.hide').toggle();
    });
  });
</script>

jquery javascript
2 Answers

I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?

Simply add a line in your jquery above your toggle function and call on your .hide class selector and use .hide(); Then when you click it the toggle function fires.

also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?

Yes... Make your label display as block in your CSS file...

label {
  display: block;
} 


$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
});
table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
}

[data-toggle="toggle"] {
  display: none;
}

label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tbody class="labels">
      <tr>
        <td colspan="2">
          <label for="section">Click me!</label>
          <input type="checkbox" id="section" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Jack</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>300</td>
      </tr>
    </tbody>
</table>

user_15335920

Several things going on here...

  1. You were hiding your checkbox, which I don't think was your intent.
  2. Check this example, where I fixed some things: https://jsfiddle.net/za73qf65/

Fixes include:

  • changing the name of your "hide" class to "hidable"
  • defaulting that "hidable" class to be display:none
  • unhiding your checkbox
  • changing your change() event handler to a click() (optional)
  • attaching your event handler to a button with an ID (you can vary that)

Point is, with my changes, your example works. You might want to tweak it for a more specific need.

user_10248320
Related