JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Module ID</th>
    <th width="70%">Module</th>
    <th>Credits</th>
    <th>Semester</th>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
    <p>Introduction to CS <span class="expand">&#9660;</span></p>
    <p class="description">
     Some extra info here.
    </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
    <p>Introduction to Uni <span class="expand">&#9660;</span></p>
    <p class="description">
     Some extra info here.
    </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to German</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>

</table>

CSS

.description {
  display:none;
}
.blue-text {
  color: blue;
}
table {
  font-family: arial, sans-serif;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding-top: 50px
}

td,
th {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding: 8px;
}

th {
  font-weight: normal;
  background-color: rgba(222, 222, 222, 0.6)
}

.modules th {}

tr:hover {
  background-color: rgba(20, 91, 130, 0.3)
}

}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

JavaScript

$(".expand").click( function () {
    $(this).closest("td").find(".description").toggle();
    console.log( $(this).html() );
    if ( $(this).hasClass("blue-text") ) {
       $(this).removeClass("blue-text");
    } else {    
      $(this).addClass("blue-text");
    }
    
});