Table head expand/collapse rows

Question

I'm making a table and I want the table to expand when the user clicks on the header, similar to a dropdown.

HTML:

{% if all_farms %}
  {% for farm in all_farms %}
    <div class="col-lg-12">
      <table class="table table-striped">
        <thead class="table-head">              
          <tr text-align="center">
            <th scope="col" style="vertical-align:middle">{{ farm }}</th>
            <th scope="col" width='30%' style="vertical-align:middle">{{ farm.uf }}</th>
            <th scope="col" width='7%' style="vertical-align:middle">{{ farm.city }}</th>
              {% for farm_data, data in farms_data.items %}
                {% if farm == farm_data %}
                  {% for info in data %}
                    <th scope="col" width='7%' style="vertical-align:middle">{% if info %}{{ info|intcomma }} ha{% else %}-{% endif %}</th>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            <th scope="col" width='3%' style="vertical-align:middle"><a href="{% url 'farm_detail' farm.id %}" class="link"><button class="btn btn-primary btn-xs"><i class="fa fa-gears"></i></button></a></th>
            <th scope="col" width='3%' style="vertical-align:middle"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal" data-font="farm/" data-whatever="{{ farm.id }}" data-name="{{ farm.name }}"><i class="fa fa-trash-o"></i></button></th>
          </tr>
        </thead>
        <tbody>
            {% for registration in all_registrations %}
              {% if registration.farm == farm %}
                <tr text-align="center">
                  <td style="vertical-align:middle;text-align:center">{{ registration.number }}</td>
                  <td style="vertical-align:middle;text-align:center">{% if registration.uf %}{{ registration.uf }}{% else %}-{% endif %}</td>
                  <td style="vertical-align:middle;text-align:center">{% if registration.city %}{{ registration.city }}{% else %}-{% endif %}</td>
                  <td style="vertical-align:middle;text-align:center">{% if registration.area %}{{ registration.area|intcomma }} ha{% else %}-{% endif %}</td>
                  <td style="vertical-align:middle;text-align:center">{% if registration.aee %}{{ registration.aee|intcomma }} ha{% else %}-{% endif %}</td>
                  <td class="client-edit"><a href="{% url 'registration_edit' registration.id %}" class="link"><button class="btn btn-primary btn-xs"><i class="fa fa-gears"></i></button></a></td>
                  <td class="task-delete"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal" data-font="farm/" data-whatever="{{ obj.id }}" data-name="{{ obj.name }}"><i class="fa fa-trash-o"></i></button></td>
                </tr>
              {% endif %}
            {% endfor %}
        </tbody>
      </table>
    </div>
  {% endfor %}
{% else %}
  <h4 style="text-align:center">Este cliente ainda não tem propriedades adicionadas</h4>
{% endif %}

I would like the "farm" lines to be dropdowns and when clicking, the "registration" information would be listed. I don't know much about front-end. Can someone help me by showing me a way to go?

**I found the answer here:** [I had to adapt but the idea is there](https://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery) — Luiz Henrique Rochelle, May 25 '22 at 15:28

DonKatsu · Answer 1 · 2022-05-26T02:58:36.573

Give your table head an onClick function.

Give your td a CSS rule that "display: none". Make sure it has a class that make it "display: none".

Then make a script tag right above the body tag or below the table tag.

In the script tag, make a function that is named the same as the onClick from the table head.

The function will remove the CSS rule class if table head is clicked on. Use the element.classList.remove().

Hope that helps.

EDIT: Added a sample code that is kind of tailored to your idea. The header is clickable and once it is clicked, the table data will show. All styling and logic were done in the script tag.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable Table Header</title>
</head>
    

<body>  
<table border="2px">
    <thead onClick="expandTable()">
        <tr>
            <th>Farm</th>
            <th>Farm UF</th>
            <th>Farm City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Farm 1</td>
            <td>Farm 2</td>
            <td>Farm 3</td>
        </tr>
        <tr>
            <td>Farm 11</td>
            <td>Farm 12</td>
            <td>Farm 13</td>
        </tr>
        <tr>
            <td>Farm 21</td>
            <td>Farm 22</td>
            <td>Farm 23</td>
        </tr>
    </tbody>
</table>
    

<script>
    //on switch shows, off switch non-existent
    var theSwitch = "on";
    var allTD = document.querySelectorAll("td");
    
    function expandTable() {
        if (theSwitch == "off") {
            
            for(i=0; i<allTD.length; i++) {
                allTD[i].style.display = "none";
            }
            
            theSwitch = "on";
        }
        else { //theSwitch == "on"
            
            for(i=0; i<allTD.length; i++) {
                allTD[i].style.display = "table-cell";
            }
            
            theSwitch = "off";
        }
    }
    
</script>
    
</body>
</html>

That way all hidden lines appear. I want only the clicked header lines to appear. — Luiz Henrique Rochelle, May 25 '22 at 14:23

Table head expand/collapse rows

1 Answers1