JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span >Bonding 16 downstream channels.</span><br>
<div class='arrow-right arrow-up' id='clickme'><div><span class='exp_'>Expand Foward RF data </span><br>

<table cellspacing="0" cellpadding="0" border="0" class="speedTestTable" id="downTable" style="display: none;">
  <thead>
    <tr style="background-color: rgb(189, 189, 189);">
      <th class="header headerSortDown">Channel Frequency</th>
      <th class="header">DownStream Pwr</th>
      <th class="header">DownStream SNR</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: rgb(219, 219, 219);">
      <td>657 Mhz</td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">5.3 dBmV</span></td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">40.3 dBmV</span></td>
    </tr>
    <tr style="background-color: rgb(189, 189, 189);">
      <td>663 Mhz</td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">5.1 dBmV</span></td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">38.9 dBmV</span></td>
    </tr>
    <tr style="background-color: rgb(219, 219, 219);">
      <td>669 Mhz</td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">5 dBmV</span></td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">40.3 dBmV</span></td>
    </tr>
    <tr style="background-color: rgb(189, 189, 189);">
      <td>675 Mhz</td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">4.9 dBmV</span></td>
      <td style="background-color: rgb(0, 128, 0);"><span class="" style="color: rgb(255, 255, 255);">40.3 dBmV</span></td>
    </tr>
    <tr style="background-color: rgb(219, 219,...

CSS

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid green;
}

.exp_ {
   padding-left:20px;
   height: 5px;
   width:100px;
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.collapse_ {
  padding-top:5px;
   padding-left:20px;
   height: 100%;
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

JavaScript

$("#clickme").click(function() {
  $(this).toggleClass("arrow-right");
  $("#downTable").slideToggle("slow", function() {

  });
});