Im trying to set up table that starts off hidden when the page loads but will appear when the down arrow tarrow next to the heading is clicked. I've tried moving some stuff around in the CSS but it was no use. The JavaScript console displays this <div >...</div> When I load the page

let tarrow = document.querySelectorAll(".tarrow");
for (var i = 0; i < tarrow.length; i  ) {
  tarrow[i].addEventListener("click", (e)=>{
    let tarrowParent = e.target.parentElement.parentElement;
    console.log(tarrowParent);
    tarrowParent.classList.toggle(".showTable");
  });
}

.content{
  position: relative;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
  padding: 15px;

}

.bantable{
     border-collapse: collapse;
     
  }
  .bantable .table-display i.tarrow{
     border-collapse: collapse;
     
  }


  .bantable td{
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #ccd9df;
  }
  .bantable th{
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
    border-bottom: 2px solid #ccd9df;
    border-top: 1px solid #ccd9df;
  }
  .bantable tr:hover {
    background-color: #e3e3e3;
  }
  .bantable a{
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: black;
  }

  .bantable i{

  }

  .table-heading{
    font-size: 20px;
    font-weight: 300;
    
  }

  .table-heading i{
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    transition: all 0.4s ease;
  }
  .content .bantable {
    display: none;
  }

  .content .showtable {
    display: block;
  }

  .bantable .sub-table li.goog i.tarrow{
    transform: rotate(-180deg);
  }
  .table-heading:hover i{
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
  }
  .table-heading a{
    text-decoration: none;
    color: #757272;
  }

<div class="content">
<div class="table-heading">
<a href="#">Active Temp Bans & Infractions</a><i class="bx bxs-chevron-down tarrow"></i></div>
<table class="bantable" width="100%">
<thead>
<th>Name</th>
<th>Username</th>
<th>IP Address</th>
<th>Status</th>
<th>Reason</th>
<th>Created</th>
<th>ACP</th>
</thead>
<tr>
<td>Test Name</td>
<td></td>
<td>0.0.0.0</td>
<td>Suspension 2 Weeks</td>
<td>Details<td>2016-01-04 19:17:00</td>
<td>Edit</td>
<tr>
</table>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

My apologies, I overlooked several things. Check out this snippet.

The .tarrow element wasn't clickable, because it had no width or height. I added a symbol, so that I could click it.

In the CSS, I updated/added:

    .content.showTable .bantable {
        display: block;
    }

In the JS, you only had to remove the . from the toggle function class name, but I made some overall changes.

const tarrow = document.querySelectorAll(".tarrow");
        for (var i = 0; i < tarrow.length; i  ) {
            tarrow[i].onclick = function(e){
                toggleTable(e)
            }
        }
        
        function toggleTable(e){
            e.target.parentElement.parentElement.classList.toggle("showTable");
        }

.content{
  position: relative;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
  padding: 15px;

}

.bantable{
     border-collapse: collapse;
     
  }
  .bantable .table-display i.tarrow{
     border-collapse: collapse;
     
  }


  .bantable td{
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #ccd9df;
  }
  .bantable th{
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
    border-bottom: 2px solid #ccd9df;
    border-top: 1px solid #ccd9df;
  }
  .bantable tr:hover {
    background-color: #e3e3e3;
  }
  .bantable a{
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: black;
  }

  .bantable i{

  }

  .table-heading{
    font-size: 20px;
    font-weight: 300;
    
  }

  .table-heading i{
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    transition: all 0.4s ease;
  }
  .content .bantable {
    display: none;
  }

  .content.showTable .bantable {
    display: block;
  }

  .bantable .sub-table li.goog i.tarrow{
    transform: rotate(-180deg);
  }
  .table-heading:hover i{
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
  }
  .table-heading a{
    text-decoration: none;
    color: #757272;
  }

<div class="content">
<div class="table-heading">

<a href="#">Active Temp Bans & Infractions</a><i class="bx bxs-chevron-down tarrow"> </i></div>

<table class="bantable" width="100%">
<thead>
<th>Name</th>
<th>Username</th>
<th>IP Address</th>
<th>Status</th>
<th>Reason</th>
<th>Created</th>
<th>ACP</th>
</thead>
<tbody>
<tr>
<td>Test Name</td>
<td></td>
<td>0.0.0.0</td>
<td>Suspension 2 Weeks</td>
<td>Details<td>2016-01-04 19:17:00</td>
<td>Edit</td>
<tr>
</tbody>
</table>

</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can simply change your js function to this.

function click() {
let tarrow = document.querySelectorAll(".tarrow");
        for (var i = 0; i < tarrow.length; i  ) {
            tarrow[i].addEventListener("click", (e)=>{
            const table = document.querySelector(".bantable");
            table.classList.toggle("showtable");
            });
       }
}

and you had a typo in table.classList.toggle("showtable"); line, in your CSS the class name is showtable, you added the class name in JS as '.showTable'. and you don't need the . in front of the class name when you add it to toggle function also.