JSFiddle - React, Tailwind, and code Playground

by Emer Fanning

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
         
               <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default">
                <div id="flip" class="panel-subjects">
                        <div class="table-responsive"> 
                          <table class="table table-bordered table-striped table-list" style="margin-bottom: 0px;">
                            <tbody>
                                <tr>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                </tr>
                                <tr>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                </tr> 
                            </tbody>
                          </table>
                        </div>
                </div>
                <div id="panelSub" class="panel-subjects">
                         <div class="table-responsive">
                         <table class="table table-bordered table-striped table-list" style="margin-bottom: 0px;">
                            <tbody>
                                <tr>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                                </tr>
                                <tr>
                                  <td>SUBJECT NAME</td>
                                  <td>SUBJECT NAME</td>
                      ...

CSS

.panel-subjects {
  padding: 0px;
}

h5.subjectOpen {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 20px;
  color: #ffffff;
}

#toggleSubjects {
  background-color: #4EB25C; 
  text-align:center;
  cursor: pointer;
  padding: 8px 10px;
}
.fa-arrow-circle-down:first-of-type::after {
    content: 'Show All Subjects';
    font-family: sans-serif;
}

.fa-arrow-circle-up:first-of-type::after {
    content: 'Hide All Subjects';
    font-family: sans-serif;
}

@media screen and (max-width: 767px) {
    table, tbody, tr, td {
        display:block;
    }
}

JavaScript

$(document).ready(function () {
    var theToggle = '<div class="panel-heading" id="toggleSubjects"><h5 class="subjectOpen"> <i class="fa fa-arrow-circle-down"></i> <i class="fa fa-arrow-circle-down"></i></h5></div>';
    $("#panelSub").hide();
    $(".panel-default").append(theToggle);
    $("#toggleSubjects").click(function () {
        $("#panelSub").slideToggle("slow");                
        $(this).find('i').toggleClass('fa-arrow-circle-down fa-arrow-circle-up')
    });
    return false;
});