JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<body class="ms-font-m">
  the body
  <div id="footer">
    
    <p id='show'><i id='chevron' class="fa fa-chevron-right"></i> 7 errors</p>
    <div id='shoowDiv'>
      <ul>
        <li>Issue #1</li>
        <li>Issue #2</li>
        <li>Issue #3</li>
        <li>Issue #4</li>
        <li>Issue #5</li>
        <li>Issue #6</li>
        <li>Issue #7</li>
      </ul>
    </div>
  </div>
</body>

CSS

#footer {
   background-color: #FA8072;
   width: 100%;
   position: fixed;
   bottom: 0px;
 }
 
 #shoowDiv{
   display:none;
   max-height: 100px;
   overflow-y: auto;
   
 }
#show{
  cursor: pointer;
}

JavaScript

var isCollapsed = false;
$("#show").click(function() {
	$("#show").find("i").toggleClass("fa-chevron-down");
  $("#shoowDiv").toggle(200);
});