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">
		</header>            
        <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-bottom: 0px;
  color: #ffffff;
}

#toggleSubjects {
  background-color: #4EB25C; 
  text-align:center;
  cursor: pointer;
  padding: 8px 10px;
}


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

JavaScript

$(function () {
    //Hide panel with jQuery and create toggle button so subjects will just show if there's no javascript
    $("#panelSub").hide();
    $('#toggleSubjects').html('<h5 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects <i class="fa fa-arrow-circle-down"></i></h5>');
    //Toggle extra subject panel
    $("#toggleSubjects").click(function () {
        $("#panelSub").slideToggle("slow");
        //Change toggle text for show / hide
        if ($.trim($('.subjectOpen').text()) === 'Show All Subjects') {
            $(this).html('<h5 class="subjectOpen"><i class="fa fa-arrow-circle-up"></i>Hide All Subjects <i class="fa fa-arrow-circle-up"></i></h5>');
        } else {
            $(this).html('<h5 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects <i class="fa fa-arrow-circle-down"></i></h5>');
        }
    });
    return false;
});